window.onload=function () {
var canvas = document.getElementById("birthday");
var width = window.screen.availWidth;
canvas.width = window.screen.availWidth;
canvas.height = width*2;
canvas.style.border = "1px solid red";
var context = canvas.getContext("2d");
/*图像加载*/
var image = new Image();
image.src="a1.jpg";
image.addEventListener('load',eventSheetloaded,false);
function eventSheetloaded(){
context.drawImage(image,0,0);
}
var linex = [];
var liney = [];
var lastX = -1;
var lastY = -1;
var flag = 0;
//临时绘图数据
var imageData = "";
canvas.addEventListener('mousemove', onMouseMove, false);
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
function onMouseMove(evt) {
if (flag == 1) {
var x = evt.layerX;
var y = evt.layerY;
linex.push(x);
liney.push(y);
context.lineTo(x,y);
lastX = x;
} lastY = y;
context.lineCap="round";
context.lineJoin="round";
context.lineWidth = 20;
context.shadowColor = 'white';
context.strokeStyle = "rgba(0,0,0,0)";
context.globalCompositeOperation="destination-out";
context.stroke();
context.strokeStyle = "rgba(254,0,0,0.1)";
context.globalCompositeOperation="destination-out";
context.stroke();
}
function onMouseDown(evt) {
flag = 1;
lastX = evt.layerX;
lastY = evt.layerY;
linex.push(lastX);
liney.push(lastY);
context.beginPath();
context.moveTo(lastX,lastY);
}
function onMouseUp(evt) {
flag = 0;
context.clearRect(0,0,0,0);
}
function onMouseOut(evt){
flag = 0;
context.clearRect(0,0,500,400);
reDraw();
}
};
为什么呢·!?????