《HTML5 Canvas游戏开发实战》——3.3 自定义画板

简介: 本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.3节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.3 自定义画板

前面的章节已经将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所示。

image

代码清单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所示。

image

在代码清单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所示。

image

如果想要将图片保存为图片文件,还需要借助PHP或ASP等工具,这里就不做讨论了。

相关文章
|
26天前
|
前端开发 JavaScript API
2024 新年HTML5+Canvas制作3D烟花特效(附源码)
2024 新年HTML5+Canvas制作3D烟花特效(附源码)
29 0
|
1月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
34 0
|
2天前
|
前端开发 JavaScript 容器
编程笔记 html5&css&js 032 HTML Canvas
编程笔记 html5&css&js 032 HTML Canvas
|
12天前
|
安全 Windows
在线网页版扫雷游戏HTML源码
在线网页版扫雷游戏HTML源码
17 1
在线网页版扫雷游戏HTML源码
|
2月前
|
移动开发 前端开发 JavaScript
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
95 0
html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
|
2月前
|
JavaScript
基于js和html的骰子游戏
基于js和html的骰子游戏
14 0
|
2月前
|
前端开发 JavaScript 定位技术
web版拳皇,使用html,css,js来制作一款拳皇游戏
web版拳皇,使用html,css,js来制作一款拳皇游戏
26 0
|
2月前
|
JSON 定位技术 API
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
21 0
|
2月前
|
移动开发 JavaScript 前端开发
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(上)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
30 0
|
2月前
|
JSON 定位技术 数据格式
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
23 0