canvas特效代碼詳解（2）
阿新 • • 發佈：2017-10-25
text pre javascrip css png tco border src null
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.onmousedown=()=>{ 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>
效果圖，可在規定的矩形內繪制任何寬高的矩形
canvas特效代碼詳解（2）