原文地址:
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ 根据原文尝试了一下,很好的HTML5入门;
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var coloringCanvas = $("#coloringBook");
var context = document.getElementById("coloringBook").getContext("2d");
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
var colorPurple = "#cb3594";
var colorGreen = "#659b41";
var colorYellow = "#ffcf33";
var colorBrown = "#986928";
var curColor = colorPurple;//current use color
var clickColor = new Array();
var sizeSmall = 3;
var sizeNormal = 5;
var sizeLarge = 10;
var sizeHuge = 20;
var curSize = sizeNormal;
var clickSize = new Array();
var toolCrayon = "Crayon";//蜡笔
var toolMarker = "Marker";//记号笔
var toolEraser = "Eraser";//橡皮
var curTool = toolMarker;
var canvasWidth = context.canvas.width;
var canvasHeight = context.canvas.height;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
if(curTool == toolEraser){//如果为橡皮工具
clickColor.push("white");//颜色设置白色
}else{
clickColor.push(curColor);
}
clickSize.push(curSize);
}
function redraw(){
context.clearRect(0, 0, canvasWidth, canvasHeight); // Clears the canvas
context.lineJoin = "round";
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.strokeStyle = clickColor[i];//画笔颜色
context.lineWidth = clickSize[i];//画笔大小
context.stroke();
}
//蜡笔工具处理
if(curTool == toolCrayon){
context.globalAlpha = 0.4;
context.drawImage(crayonTextureImage, 0, 0, canvasWidth, canvasHeight);
}
context.globalAlpha = 1;
}
coloringCanvas.mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(mouseX, mouseY);
redraw();
});
coloringCanvas.mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
coloringCanvas.mouseup(function(e){
paint = false;
});
coloringCanvas.mouseleave(function(e){
paint = false;
});
//clear the canvas
$("#clearBtn").click(function(e){
//清空画布
context.clearRect(0, 0, canvasWidth, canvasHeight); // Clears the canvas
//清空绘画信息数组
clickX = [];
clickY = [];
clickDrag = [];
clickColor = [];
clickSize = [];
});
//choose a color
$("#colorPurpleBtn").click(function(e){
curColor = colorPurple;
});
$("#colorGreenBtn").click(function(e){
curColor = colorGreen;
});
$("#colorYellowBtn").click(function(e){
curColor = colorYellow;
});
$("#colorBrownBtn").click(function(e){
curColor = colorBrown;
});
//choose a size
$("#sizeSmallBtn").click(function(e){
curSize = sizeSmall;
});
$("#sizeNormalBtn").click(function(e){
curSize = sizeNormal;
});
$("#sizeLargeBtn").click(function(e){
curSize = sizeLarge;
});
$("#sizeHugeBtn").click(function(e){
curSize = sizeHuge;
});
//choose a tool
$("#toolCrayonBtn").click(function(e){
curTool = toolCrayon;
});
$("#toolMarkerBtn").click(function(e){
curTool = toolMarker;
});
$("#toolEraserBtn").click(function(e){
curTool = toolEraser;
});
});
</script>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
clear the canvas:<input id ="clearBtn" type="button" value="clear">
<br>
choose a color:
<input id ="colorPurpleBtn" type="button" value="Purple">
<input id ="colorGreenBtn" type="button" value="Green">
<input id ="colorYellowBtn" type="button" value="Yellow">
<input id ="colorBrownBtn" type="button" value="Brown">
<br>
choose a size:
<input id ="sizeSmallBtn" type="button" value="Small">
<input id ="sizeNormalBtn" type="button" value="Normal">
<input id ="sizeLargeBtn" type="button" value="Large">
<input id ="sizeHugeBtn" type="button" value="Huge">
<br>
choose a tool:
<input id ="toolCrayonBtn" type="button" value="Crayon">
<input id ="toolMarkerBtn" type="button" value="Marker">
<input id ="toolEraserBtn" type="button" value="Eraser">
<br>
<canvas id="coloringBook" width="500" height="400" style="border: 1px solid grey">
</canvas>
</body>
</html>