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;
}
}