同样，在addClick方法中，也必须加入对用户每次选择颜色的记录，所以更新后的addclick代码如下：
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
clickColor.push(curColor);
}
而在redraw的方法中，我们去掉context.strokeStyle一句，将绘画笔的颜色设置到for循环中去设置，更新后的redraw代码如下：
/* context.strokeStyle = "#df4b26"; */
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
if(clickDrag[i] && i){
contex.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.stroke();
}
}
我们再设置画笔每次绘画笔触范围的大小，同样，有四种选择，分别为小，中，大和很大，并用clickSize数组记录用户的选择，默认的笔触范围大小用curSize进行记录。并且也要更新redraw方法，更新后的addClick,redraw代码如下：
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
clickColor.push(curColor);
clickSize.push(curSize);
}
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;
}
function redraw(){
。。。。。。。。
context.strokeStyle = clickColor[i];
context.lineWidth = radius;
context.stroke();
}
}
最后，我们设置不同笔的绘画效果，分别是蜡笔和普通笔以及橡皮擦功能。用clickTool记录用户选择的工具种类，curTool则为当前用户选择的工具，addClick的方法如下：
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
if(curTool == "eraser"){
clickColor.push("white");
}else{
clickColor.push(curColor);
}
clickColor.push(curColor);
clickSize.push(curSize);
}
注意，这里判断如果用户选择的工具是橡皮擦，则将白色加入到clickColor数组中。同样要在redraw的方法中对新的两个绘图工具进行处理，代码如下：
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 = radius;
context.stroke();
}
if(curTool == "crayon") {
context.globalAlpha = 0.4;
context.drawImage(crayonTextureImage, 0, 0, canvasWidth, canvasHeight);
}
context.globalAlpha = 1;
}
这里针对当用户选择“crazyon”蜡笔效果时，对绘画的效果进行了透明度的处理。
最后，我们要把小鸭子的图在画布中画上，首先要声明一个图片对象如下：
然后在prepareCanvas()方法中加载事先准备好的图片：
...
outlineImage.src = "images/watermelon-duck-outline.png";
}
最后在redraw的绘画方法中，要使用canvas画布的drawImage方法进行绘画，代码为：
...
context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
}
其中drawingAreaX, drawingAreaY为要在哪个具体位置绘画图形，drawingAreaWidth和
drawingAreaHeight则为具体图片的宽度和高度。
我们还要把绘图的区域限制在一个矩形框里，这要用到画布的save和clip方法。其中save用来保存Canvas的状态,而clip方法则是指定一个区域进行剪裁，规定了绘画的区域，代码如下：
{
...
context.save();
context.beginPath();
context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
context.clip(); //剪裁出指定的绘画区域
var radius;
var i = 0;
for(; i < clickX.length; i++)
{
...
}
context.restore(); //使用restore方法，恢复每次保存的canvas状态
...
}
总结
本文中只是对如何使用HTML5和javascript绘制小绘图应用进行了思路和基本技术点的分析，其中着重介绍了画布canvas的各种使用方法，完整的代码请到这里下载
(http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/downloads/html5-canvas-drawing-app.zip)，代码中完成实现了相关的各种功能，并加入了一些逻辑判断等操作，由于篇幅关系，不再在文中详细描述。
