小萝莉的游乐园

制作一个自定义画板，进一步熟悉一下Canvas的API 用法。

一、画板的建立

需求分析：

（1）当鼠标按下的时候，开始描画，此处需要加入鼠标按下事件。
（2）当鼠标弹起的时候，结束描画，此处需要加入鼠标弹起事件。
（3）在鼠标按下并且移动的时候，在鼠标经过的路径上画线，此处需要加入鼠标移动
事件。

代码实现：

下列代码画了一个黑色矩形区域，作为画板。

// 画一个黑色矩形
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);

三个函数：

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;

实现效果：

二、加入按钮操作改变画笔颜色和线条宽度的功能

下面的代码加入了 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>

实现效果：

三、画布的导出功能

画板的图片导出功能，即复制Canvas 画板上的图像，使其保存为图片格式。

要将 Canvas 画板保存为图片格式，只需要使用下面的方法即可：

canvas.toDataURL("image/png");

现在可在页面上新建一个 标签，然后将复制的 Canvas 内容用 表示出来。

代码如下：

/**添加一个导出按钮/
<button id="but10" style="width:80px;background-color:pink;" onclick="copyimage();">EXPORT</button>

/*新建一个 <img > 标签*/
<img src="" id="image_png"  width="600" height="300">

/*将复制的 Canvas 内容用 <img> 表示出来*/
function copyimage(event){
    var img_png_src = canvas.toDataURL("image/png");
    document.getElementById("image_png").src = img_png_src;
}

实现效果：

四、完整代码

<!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 id="but10" 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>
 Previous

HTML5-Canvas