下面是draw的主要方法：

function redraw() { // Make sure required resources are loaded before redrawing if(curLoadResNum < totalLoadResources){ return; } clearCanvas(); var locX; var locY; if(curTool == "crayon") { // Draw the crayon tool background context.drawImage(crayonBackgroundImage, 0, 0, canvasWidth, canvasHeight); // Purple locX = (curColor == colorPurple) ? 18 : 52; locY = 19; context.beginPath(); context.moveTo(locX + 41, locY + 11); context.lineTo(locX + 41, locY + 35); context.lineTo(locX + 29, locY + 35); context.lineTo(locX + 29, locY + 33); context.lineTo(locX + 11, locY + 27); context.lineTo(locX + 11, locY + 19); context.lineTo(locX + 29, locY + 13); context.lineTo(locX + 29, locY + 11); context.lineTo(locX + 41, locY + 11); context.closePath(); context.fillStyle = colorPurple; context.fill(); if(curColor == colorPurple){ context.drawImage(crayonImage, locX, locY, mediumImageWidth, mediumImageHeight); }else{ context.drawImage(crayonImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight); } // Green locX = (curColor == colorGreen) ? 18 : 52; locY += 46; context.beginPath(); context.moveTo(locX + 41, locY + 11); context.lineTo(locX + 41, locY + 35); context.lineTo(locX + 29, locY + 35); context.lineTo(locX + 29, locY + 33); context.lineTo(locX + 11, locY + 27); context.lineTo(locX + 11, locY + 19); context.lineTo(locX + 29, locY + 13); context.lineTo(locX + 29, locY + 11); context.lineTo(locX + 41, locY + 11); context.closePath(); context.fillStyle = colorGreen; context.fill(); if(curColor == colorGreen){ context.drawImage(crayonImage, locX, locY, mediumImageWidth, mediumImageHeight); }else{ context.drawImage(crayonImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight); } // Yellow locX = (curColor == colorYellow) ? 18 : 52; locY += 46; context.beginPath(); context.moveTo(locX + 41, locY + 11); context.lineTo(locX + 41, locY + 35); context.lineTo(locX + 29, locY + 35); context.lineTo(locX + 29, locY + 33); context.lineTo(locX + 11, locY + 27); context.lineTo(locX + 11, locY + 19); context.lineTo(locX + 29, locY + 13); context.lineTo(locX + 29, locY + 11); context.lineTo(locX + 41, locY + 11); context.closePath(); context.fillStyle = colorYellow; context.fill(); if(curColor == colorYellow){ context.drawImage(crayonImage, locX, locY, mediumImageWidth, mediumImageHeight); }else{ context.drawImage(crayonImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight); } // Yellow locX = (curColor == colorBrown) ? 18 : 52; locY += 46; context.beginPath(); context.moveTo(locX + 41, locY + 11); context.lineTo(locX + 41, locY + 35); context.lineTo(locX + 29, locY + 35); context.lineTo(locX + 29, locY + 33); context.lineTo(locX + 11, locY + 27); context.lineTo(locX + 11, locY + 19); context.lineTo(locX + 29, locY + 13); context.lineTo(locX + 29, locY + 11); context.lineTo(locX + 41, locY + 11); context.closePath(); context.fillStyle = colorBrown; context.fill(); if(curColor == colorBrown){ context.drawImage(crayonImage, locX, locY, mediumImageWidth, mediumImageHeight); }else{ context.drawImage(crayonImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight); } } else if(curTool == "marker") { // Draw the marker tool background context.drawImage(markerBackgroundImage, 0, 0, canvasWidth, canvasHeight); // Purple locX = (curColor == colorPurple) ? 18 : 52; locY = 19; context.beginPath(); context.moveTo(locX + 10, locY + 24); context.lineTo(locX + 10, locY + 24); context.lineTo(locX + 22, locY + 16); context.lineTo(locX + 22, locY + 31); context.closePath(); context.fillStyle = colorPurple; context.fill(); if(curColor == colorPurple){ context.drawImage(markerImage, locX, locY, mediumImageWidth, mediumImageHeight); }else{ context.drawImage(markerImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight); } // Green locX = (curColor == colorGreen) ? 18 : 52; locY += 46; context.beginPath(); context.moveTo(locX + 10, locY + 24); context.lineTo(locX + 10, locY + 24); context.lineTo(locX + 22, locY + 16); context.lineTo(locX + 22, locY + 31); context.closePath(); context.fillStyle = colorGreen; context.fill(); if(curColor == colorGreen){ context.drawImage(markerImage, locX, locY, mediumImageWidth, mediumImageHeight); }else{ context.drawImage(markerImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight); } // Yellow locX = (curColor == colorYellow) ? 18 : 52; locY += 46; context.beginPath(); context.moveTo(locX + 10, locY + 24); context.lineTo(locX + 10, locY + 24); context.lineTo(locX + 22, locY + 16); context.lineTo(locX + 22, locY + 31); context.closePath(); context.fillStyle = colorYellow; context.fill(); if(curColor == colorYellow){ context.drawImage(markerImage, locX, locY, mediumImageWidth, mediumImageHeight); }else{ context.drawImage(markerImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight); } // Yellow locX = (curColor == colorBrown) ? 18 : 52; locY += 46; context.beginPath(); context.moveTo(locX + 10, locY + 24); context.lineTo(locX + 10, locY + 24); context.lineTo(locX + 22, locY + 16); context.lineTo(locX + 22, locY + 31); context.closePath(); context.fillStyle = colorBrown; context.fill(); if(curColor == colorBrown){ context.drawImage(markerImage, locX, locY, mediumImageWidth, mediumImageHeight); }else{ context.drawImage(markerImage, 0, 0, 59, mediumImageHeight, locX, locY, 59, mediumImageHeight); } } else if(curTool == "eraser") { context.drawImage(eraserBackgroundImage, 0, 0, canvasWidth, canvasHeight); context.drawImage(eraserImage, 18, 19, mediumImageWidth, mediumImageHeight); }else{ alert("Error: Current Tool is undefined"); } if(curSize == "small"){ locX = 467; }else if(curSize == "normal"){ locX = 450; }else if(curSize == "large"){ locX = 428; }else if(curSize == "huge"){ locX = 399; } locY = 189; context.beginPath(); context.rect(locX, locY, 2, 12); context.closePath(); context.fillStyle = '#333333'; context.fill(); // Keep the drawing in the drawing area context.save(); context.beginPath(); context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight); context.clip(); var radius; var i = 0; for(; i < clickX.length; i++) { if(clickSize[i] == "small"){ radius = 2; }else if(clickSize[i] == "normal"){ radius = 5; }else if(clickSize[i] == "large"){ radius = 10; }else if(clickSize[i] == "huge"){ radius = 20; }else{ alert("Error: Radius is zero for click " + i); radius = 0; } context.beginPath(); if(clickDrag[i] && i){ context.moveTo(clickX[i-1], clickY[i-1]); }else{ context.moveTo(clickX[i], clickY[i]); } context.lineTo(clickX[i], clickY[i]); context.closePath(); if(clickTool[i] == "eraser"){ //context.globalCompositeOperation = "destination-out"; // To erase instead of draw over with white context.strokeStyle = 'white'; }else{ //context.globalCompositeOperation = "source-over"; // To erase instead of draw over with white context.strokeStyle = clickColor[i]; } context.lineJoin = "round"; context.lineWidth = radius; context.stroke(); } //context.globalCompositeOperation = "source-over";// To erase instead of draw over with white context.restore(); // Overlay a crayon texture (if the current tool is crayon) if(curTool == "crayon"){ context.globalAlpha = 0.4; // No IE support context.drawImage(crayonTextureImage, 0, 0, canvasWidth, canvasHeight); } context.globalAlpha = 1; // No IE support // Draw the outline image context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight); }

其实HTML5说白了还是需要很多Javascript支持，不过Canvas非常不错，可以让你在上面自由地绘制图形和动画。这款基于HTML5 Canvas的网页画板就是一个很好的例子。源代码下载