前面的章节已经将Canvas的API大致介绍完毕了，下面我们来制作一个自定义画板，进一步熟悉一下这些API的用法。3.3.1 画板的建立建立一个画板的步骤如下：（1）当鼠标按下的时候，开始描画，此处需要加入鼠标按下事件。（2）当鼠标弹起的时候，结束描画，此处需要加入鼠标弹起事件。（3）在鼠标按下并且移动的时候，在鼠标经过的路径上画线，此处需要加入鼠标移动事件。代码清单3-22实现了建立一个简单画板的功能。代码清单 3-22
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> </head> <body> <canvas id="canvas" width="600" height="300""></canvas><br> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //画一个黑色矩形 ctx.fillStyle="black"; ctx.fillRect(0,0,600,300); //按下标记 var onoff = false; var oldx = -10; var oldy = -10; //设置颜色 var linecolor = "white"; //设置线宽 var linw = 4; //添加鼠标移动事件 canvas.addEventListener("mousemove",draw,true); //添加鼠标按下事件 canvas.addEventListener("mousedown",down,false); //添加鼠标弹起事件 canvas.addEventListener("mouseup",up,false); function down(event){ onoff = true; oldx = event.pageX-10; oldy = event.pageY-10; } function up(){ onoff = false; } function draw(event){ if(onoff == true){ var newx = event.pageX-10; var newy = event.pageY-10; ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle=linecolor; ctx.lineWidth=linw; ctx.lineCap="round"; ctx.stroke(); oldx = newx; oldy = newy; }; }; </script> </body> </html>运行效果如图3-38所示。
代码清单3-22建立了一个黑色画板，当鼠标在画板上移动时，随鼠标的移动会画出白色线条。在代码清单3-22中，下列代码画了一个黑色矩形区域，作为画板。
//画一个黑色矩形 ctx.fillStyle="black"; ctx.fillRect(0,0,600,300);下面建立了3个变量，变量onoff用来控制鼠标是否按下，只有当鼠标按下的时候才会开始绘图。变量oldx、oldy表示鼠标发生移动前的坐标。
//按下标记 var onoff = false; var oldx = -10; var oldy = -10;下面设置画笔的颜色为白色，线宽为4。
//设置颜色 var linecolor = "white"; //设置线宽 var linw = 4;下面给Canvas添加了鼠标按下侦听事件，当鼠标按下的时候，会调用down函数。
//添加鼠标按下事件 canvas.addEventListener("mousedown",down,false);下面给Canvas添加了鼠标弹起侦听事件，当鼠标弹起的时候，会调用up函数。
//添加鼠标弹起事件 canvas.addEventListener("mouseup",up,false);下面给Canvas添加了鼠标移动侦听事件，当鼠标在Canvas上移动的时候，会持续调用draw函数。
//添加鼠标移动事件 canvas.addEventListener("mousemove",draw,true);下面看看up、down、draw 3个函数中的内容。down函数是在鼠标按下的时候调用的。当调用down函数的时候，会将onoff变量设置为true，表示开始绘图，并给oldx、oldy赋予鼠标当前位置的坐标值。
function down(event){ onoff = true; oldx = event.pageX-10; oldy = event.pageY-10; }up函数是在鼠标弹起的时候调用的。当调用up函数的时候，将onoff变量设置为false，表示结束绘图。
function up(){ onoff = false; }draw函数是在鼠标发生移动的时候不断持续调用的。当调用draw函数的时候，首先判断onoff变量的值，即判断鼠标是否处于按下状态，如果鼠标处于按下状态，则开始画线。
function draw(event){ if(onoff == true){ var newx = event.pageX-10; var newy = event.pageY-10; ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle=linecolor; ctx.lineWidth=linw; ctx.lineCap="round"; ctx.stroke(); oldx = newx; oldy = newy; }; };每次画线时，需要确定线条的起始位置和结束位置，线条的起始位置就是坐标(oldx,oldy)，然后把当前鼠标位置作为线条的结束位置，代码如下所示：
var newx = event.pageX-10; var newy = event.pageY-10;接着，利用moveTo和lineTo画线，代码如下所示：
ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle=linecolor; ctx.lineWidth=linw; ctx.lineCap="round"; ctx.stroke();上面的代码是画一条从坐标(oldx,oldy)到坐标(newx,newy)的线段，并设置了线条的颜色、宽度和线帽的类型。在此次绘制结束后，新的鼠标位置将作为下一次画线的起始位置，代码如下所示：
oldx = newx; oldy = newy;上面的代码已经实现了一个最简单的画板功能。下面将其再完善一下，即加入按钮操作改变画笔颜色和线条宽度的功能。完整的代码如代码清单3-23所示。代码清单 3-23
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> </head> <body> <canvas id="canvas" width="600" height="300""></canvas><br> <button style="width:80px;background-color:yellow;" onclick='linecolor = "yellow";'>YELLOW</button> <button style="width:80px;background-color:red;" onclick='linecolor = "red";'>RED</button> <button style="width:80px;background-color:blue;" onclick='linecolor = "blue";'> BLUE</button> <button style="width:80px;background-color:green;" onclick='linecolor = "green";'> GREEN</button> <button style="width:80px;background-color:white;" onclick='linecolor = "white";'> WHITE</button> <button style="width:80px;background-color:black;color:white;" onclick='linecolor = "black";'>BLACK</button> <br> <button style="width:80px;background-color:white;" onclick="linw = 4;">4px</button> <button style="width:80px;background-color:white;" onclick="linw = 8;">8px</button> <button style="width:80px;background-color:white;" onclick="linw = 16;">16px</button> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //画一个黑色矩形 ctx.fillStyle="black"; ctx.fillRect(0,0,600,300); //按下标记 var onoff = false; var oldx = -10; var oldy = -10; //设置颜色 var linecolor = "white"; //设置线宽 var linw = 4; //添加鼠标移动事件 canvas.addEventListener("mousemove",draw,true); //添加鼠标按下事件 canvas.addEventListener("mousedown",down,false); //添加鼠标弹起事件 canvas.addEventListener("mouseup",up,false); function down(event){ onoff = true; oldx = event.pageX-10; oldy = event.pageY-10; } function up(){ onoff = false; } function draw(event){ if(onoff == true){ var newx = event.pageX-10; var newy = event.pageY-10; ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle=linecolor; ctx.lineWidth=linw; ctx.lineCap="round"; ctx.stroke(); oldx = newx; oldy = newy; }; }; </script> </body> </html>运行效果如图3-39所示。
在代码清单3-23中：下面的代码加入了6个按钮，并加入了单击事件，当单击不同按钮的时候，就会相应地改变画笔的颜色。
<button style="width:80px;background-color:yellow;" onclick='linecolor = "yellow";'>YELLOW</button> <button style="width:80px;background-color:red;" onclick='linecolor = "red";'>RED</button> <button style="width:80px;background-color:blue;" onclick='linecolor = "blue";'>BLUE</button> <button style="width:80px;background-color:green;" onclick='linecolor = "green";'>GREEN</button> <button style="width:80px;background-color:white;" onclick='linecolor = "white";'>WHITE</button> <button style="width:80px;background-color:black;color:white;" onclick='linecolor = "black";'>BLACK</button>下面的代码加入了3个按钮，并加入了单击事件，当单击不同按钮的时候，就会相应地改变线条的宽度。
<button style="width:80px;background-color:white;" onclick="linw = 4;">4px</button> <button style="width:80px;background-color:white;" onclick="linw = 8;">8px</button> <button style="width:80px;background-color:white;" onclick="linw = 16;">16px</button>3.3.2 Canvas画布的导出功能在3.3.1节中我们建立了一个画板，这一节再来给画板添加图片导出功能，即复制Canvas画板上的图像，使其保存为图片格式。要将Canvas画板保存为图片格式，只需要使用下面的方法即可：
canvas.toDataURL("image/png");现在可在页面上新建一个< img >标签，然后将复制的Canvas内容用< img>表示出来。完整代码如代码清单3-24所示。代码清单 3-24
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> </head> <body> <canvas id="canvas" width="600" height="300""></canvas><br> <button style="width:80px;background-color:yellow;" onclick='linecolor = "yellow";'>YELLOW</button> <button style="width:80px;background-color:red;" onclick='linecolor = "red";'>RED</button> <button style="width:80px;background-color:blue;" onclick='linecolor = "blue";'>BLUE</button> <button style="width:80px;background-color:green;" onclick='linecolor = "green";'>GREEN</button> <button style="width:80px;background-color:white;" onclick='linecolor = "white";'>WHITE</button> <button style="width:80px;background-color:black;color:white;" onclick='linecolor = "black";'>BLACK</button> <br> <button style="width:80px;background-color:white;" onclick="linw = 4;">4px</button> <button style="width:80px;background-color:white;" onclick="linw = 8;">8px</button> <button style="width:80px;background-color:white;" onclick="linw = 16;">16px</button> <br> <button style="width:80px;background-color:pink;" onclick="copyimage();">EXPORT</button> <br> <img src="" id="image_png" width="600" height="300"> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //画一个黑色矩形 ctx.fillStyle="black"; ctx.fillRect(0,0,600,300); //按下标记 var onoff = false; var oldx = -10; var oldy = -10; //设置颜色 var linecolor = "white"; //设置线宽 var linw = 4; //添加鼠标移动事件 canvas.addEventListener("mousemove",draw,true); //添加鼠标按下事件 canvas.addEventListener("mousedown",down,false); //添加鼠标弹起事件 canvas.addEventListener("mouseup",up,false); function down(event){ onoff = true; oldx = event.pageX-10; oldy = event.pageY-10; } function up(){ onoff = false; } function draw(event){ if(onoff == true){ var newx = event.pageX-10; var newy = event.pageY-10; ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle=linecolor; ctx.lineWidth=linw; ctx.lineCap="round"; ctx.stroke(); oldx = newx; oldy = newy; }; }; function copyimage(event){ var img_png_src = canvas.toDataURL("image/png"); document.getElementById("image_png").src = img_png_src; } </script> </body> </html>运行效果如图3-40所示。
如果想要将图片保存为图片文件，还需要借助PHP或ASP等工具，这里就不做讨论了。
相关资源：七夕情人节表白HTML源码(两款)