運用canvas製作簡單的畫圖
阿新 • • 發佈：2019-01-26
html部分：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="can" width="500" height="500" style="border: 1px solid red;"></canvas> </body> <script type="text/javascript" src="js/index.js" ></script> </html>
js部分：
var ob=document.getElementById("can"); var context2=ob.getContext("2d"); ob.onmousedown=function(){ ob.onmousemove=function(e){ var x=e.clientX; var y=e.clientY; context2.fillStyle = "red"; context2.fillRect(x, y, 5, 5); } }; ob.onmouseup=function(){ ob.onmousemove=null; };