canvas特效代码详解（2）
生活随笔
收集整理的這篇文章主要介紹了
canvas特效代码详解（2）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?canvas是一個(gè)就基于像素的畫圖h5元素。
?利用canvas做一個(gè)如下描述所示的動(dòng)態(tài)圖形：當(dāng)鼠標(biāo)點(diǎn)下去時(shí)開始繪圖，在鼠標(biāo)結(jié)束時(shí)完成一個(gè)矩形，當(dāng)再一次點(diǎn)擊時(shí)重復(fù)第一次的繪圖步驟。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 canvas{ 8 border: 1px solid #000; 9 } 10 </style> 11 </head> 12 <body> 13 <canvas id="canvas" width="400" height="400"></canvas> 14 <script type="text/javascript"> 15 var canvas = document.getElementById("canvas"); 16 var context = canvas.getContext("2d"); 17 // 當(dāng)鼠標(biāo)點(diǎn)擊時(shí)執(zhí)行的函數(shù) 18 canvas.οnmοusedοwn=()=>{ 19 // 得到鼠標(biāo)在canvas上的位置 20 var x = event.clientX - canvas.offsetLeft; 21 var y = event.clientY - canvas.offsetTop; 22 var x1 = 0; 23 var y1 = 0; 24 // 當(dāng)鼠標(biāo)移動(dòng)時(shí) 25 document.onmousemove = () =>{ 26 // 清除原來的矩形 27 context.clearRect(0,0,canvas.width,canvas.height); 28 // 得到鼠標(biāo)繪制結(jié)束時(shí)矩形的位置 29 x1 = event.clientX - canvas.offsetLeft; 30 y1 = event.clientY - canvas.offsetTop; 31 // 鼠標(biāo)完成繪制時(shí)的矩形的寬和高 32 context.strokeRect(x,y,(x1-x),(y1-y)); 33 } 34 // 鼠標(biāo)離開后 35 document.onmouseup = ()=>{ 36 document.onmousemove = null; 37 document.ommousedown = null; 38 } 39 } 40 </script> 41 </body> 42 </html>效果圖，可在規(guī)定的矩形內(nèi)繪制任何寬高的矩形
?
轉(zhuǎn)載于:https://www.cnblogs.com/flyingLcode/p/7731908.html
總結(jié)
以上是生活随笔為你收集整理的canvas特效代码详解（2）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第一篇：了解和使用MVPArms项目
- 下一篇： 节后的人才市场开始活跃了？