canvas特效代码详解（2）
生活随笔
收集整理的這篇文章主要介紹了
canvas特效代码详解（2）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?canvas是一個就基于像素的畫圖h5元素。
?利用canvas做一個如下描述所示的動態圖形：當鼠標點下去時開始繪圖，在鼠標結束時完成一個矩形，當再一次點擊時重復第一次的繪圖步驟。
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 // 當鼠標點擊時執行的函數 18 canvas.οnmοusedοwn=()=>{ 19 // 得到鼠標在canvas上的位置 20 var x = event.clientX - canvas.offsetLeft; 21 var y = event.clientY - canvas.offsetTop; 22 var x1 = 0; 23 var y1 = 0; 24 // 當鼠標移動時 25 document.onmousemove = () =>{ 26 // 清除原來的矩形 27 context.clearRect(0,0,canvas.width,canvas.height); 28 // 得到鼠標繪制結束時矩形的位置 29 x1 = event.clientX - canvas.offsetLeft; 30 y1 = event.clientY - canvas.offsetTop; 31 // 鼠標完成繪制時的矩形的寬和高 32 context.strokeRect(x,y,(x1-x),(y1-y)); 33 } 34 // 鼠標離開后 35 document.onmouseup = ()=>{ 36 document.onmousemove = null; 37 document.ommousedown = null; 38 } 39 } 40 </script> 41 </body> 42 </html>效果圖，可在規定的矩形內繪制任何寬高的矩形
?
轉載于:https://www.cnblogs.com/flyingLcode/p/7731908.html
總結
以上是生活随笔為你收集整理的canvas特效代码详解（2）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第一篇：了解和使用MVPArms项目
- 下一篇： 节后的人才市场开始活跃了？