當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

canvas绘制图像image

發布時間：2023/12/10 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。