HTML5的canvas实现简单的画板功能,有时间可以再完善一下。
window.onload =function () {
var canvas = document.getElementById('myCanvas'),iLastX,iLastY,iX,iY,
mouseIsDown,
cxr = canvas.getContext("2d"),
function bind() {
canvas.onmousedown = function (ev) {
mouseIsDown = true;
var event = ev || window.event;
iLastX = event.clientX - canvas.offsetLeft + (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft);
iLastY = event.clientY - canvas.offsetTop + (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop)
};
canvas.onclick = function (ev) {
var event = ev || window.event;
iLastX = event.clientX - canvas.offsetLeft + (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft);
iLastY = event.clientY - canvas.offsetTop + (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
cxr.beginPath();
cxr.arc(iLastX, iLastY, 1, 0, 2 * Math.PI);
cxr.stroke();
};
canvas.onmouseup = function () {
mouseIsDown = false;
iLastX = 0;
iLastY = 0
};
canvas.onmousemove = function (ev) {
if(mouseIsDown) {
var event = ev || window.event;
iX = event.clientX - canvas.offsetLeft + (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft);
iY = event.clientY - canvas.offsetTop + (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop);
cxr.moveTo(iLastX, iLastY);
cxr.lineTo(iX, iY);
cxr.stroke();
iLastX = iX;
iLastY = iY;
}
}
}
bind();
};