鼠标画线
var oC = document.getElementById("c1");
var cvsCtx = oC.getContext("2d");
oC.onmousedown = function(ev) {
var ev = ev || window.event;
cvsCtx.save();
cvsCtx.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
document.onmousemove = function(ev) {
var ev = ev || window.event;
cvsCtx.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
cvsCtx.stroke();
};
document.onmouseup = function(ev) {
cvsCtx.restore();
document.onmouseup = document.onmousemove = null;
};
};
方块移动
var oC = document.getElementById("c1");
var cvsCtx = oC.getContext("2d");
var num = 0;
cvsCtx.strokeRect(0, 0, 100, 100);
setInterval(() => {
num++;
cvsCtx.clearRect(0, 0, oC.width, oC.height);
cvsCtx.strokeRect(num, num, 100, 100)
}, 30);