canvasで簡単なキャンバス効果を実現

1912 ワード

Document

var canvas = document.getElementById("mycanvas"); var box = document.getElementById("box"); var nul = document.getElementById("nul"); // canvas.width = 500; canvas.height = 500; // var cxt = canvas.getContext("2d"); // canvas.onmousedown = function(e){ // var x = e.clientX - canvas.offsetLeft; var y = e.clientY - canvas.offsetTop; cxt.beginPath(); cxt.moveTo(x, y); console.log("mousedown"); // canvas.onmousemove = function(e){ var x = e.clientX - canvas.offsetLeft; var y = e.clientY - canvas.offsetTop; cxt.lineTo(x, y); cxt.stroke(); } // box box.onclick=function(){ cxt.strokeStyle = "yellow"; } // nul nul.onclick=function(){ cxt.clearRect(0,0,500,500); } // canvas.onmouseup = function(){ canvas.onmousemove = null; } }