canvas绘制图像image
生活随笔
收集整理的這篇文章主要介紹了
canvas绘制图像image
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
canvas繪制圖像image
1.image的三個script的基本語法
準備工作:1.定義畫布長度，獲取2D繪圖環境
? 2.建立對面對象，設置圖片路徑
? 3.載入圖片，開始繪制
a.簡單的畫布上根據坐標繪制
ctx.drawImage(img,x,y)
img為要繪制的圖像，x，y分別為繪制位置的橫縱坐標
b.同時定義坐標和圖片大小
ctx.drawImage(img,x,y,width,height)
img為要繪制的圖像，x，y分別為繪制位置的橫縱坐標,width，height分別為繪制圖像的寬度和高度
c.剪切圖像，并在畫布上定位被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
2.自我學習--------實際應用案例
``
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>我有一朵小紅花</title><style> body{text-align: center;}canvas{background-color: cornsilk;}</style> </head> <body><font color="coral" size="50">送你一朵小紅花</font><canvas id="c1" width="1000" height="400"></canvas> </body> <script>var ctx=c1.getContext("2d") //獲取繪圖2D環境var img=new Image(); //創建圖片對象img.src="img/一朵小花_副本.jpg" //設置繪制圖像路徑img.onload=function(){ //圖片加載完再去控制//四個邊角ctx.drawImage(img,0,0)ctx.drawImage(img,0,400-64)ctx.drawImage(img,1000-64,0)ctx.drawImage(img,1000-64,400-64)//中心來個大的ctx.drawImage(img,400,100,200,200)//剪切版ctx.drawImage(img,0,0,32,32,64,64,100,100)ctx.drawImage(img,32,0,32,32,1000-64-100,64,100,100)ctx.drawImage(img,0,32,32,32,64,400-64-100,100,100)ctx.drawImage(img,32,32,32,32,1000-100-64,400-100-64,100,100)} </script></html>運行結果:
圖片自取:
二更:2021.5.12.20:40
b.任意大小位置圖片的繪制
核心就是使用一個產生隨機數的函數
``
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>任意大小image繪畫</title><style>body{text-align: center;background-color: black; }canvas{background-color: paleturquoise;}</style> </head> <body><font color="coral" size="50">歡迎來到我的世界</font><canvas id="c2" width="600" height="400"></canvas><script>var ctx=c2.getContext("2d");var image=new Image();image.src="img/star.png";image.onload= function(){for(var i=0;i<20;i++ ){var size=rn(20,100);ctx.drawImage(image,rn(0,600-size),rn(0,400-size),size,size);}}//產生隨機數sfunction rn(min,max){return Math.random()*(ma-min)+min;}</script> </body></html>運行結果:
圖片自取：
自我提醒
img.οnlοad= 可不能再加括號了（img.onload()=）
真是哭了，一開始找了半天都沒有找到錯在哪里。
c.image的移動擴展
核心就是
1.每次擦一下畫布:ctx.clearRect(x,y, width,height);
2.setInterval的應用
setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
``
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>圖片的移動</title><style>body{text-align: center;background-color: #000000;}canvas{background-color: cyan;}</style> </head> <body><font color="coral" size="50">星星隨我動，鮮花為你開</font><br /><canvas id="c3" width="600" height="400"></canvas><script>var ctx=c3.getContext("2d");console.log(ctx);var img=new Image();var img2=new Image();img.src="img/star.png";img2.src="img/一朵小花_副本.jpg";img.onload=function(){var x=64;var y=64;var xMove=1;var yMove=1;setInterval(function(){//四個花邊ctx.drawImage(img2,0,0);ctx.drawImage(img2,0,400-64);ctx.drawImage(img2,600-64,0);ctx.drawImage(img2,600-64,400-64);//移動星星ctx.clearRect(64,64,600-64,400-64);x+=xMove*6;y+=yMove*6;if(x<=600&&y<=400){x+=xMove*6;y+=yMove*6;}else{x=64;y=64;}ctx.drawImage(img,x,y);},200)}</script> </body> </html>運行結果:
星星隨我動，鮮花為你開
一個小視頻結束這段操作。
總結
以上是生活随笔為你收集整理的canvas绘制图像image的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SSL双向认证的实现
- 下一篇： 使用java实现敏感词汇过滤功能