AI 助理
备案控制台
开发者社区 华章出版社 文章 正文

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

2017-08-01 1352
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本节书摘来自华章计算机《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等工具，这里就不做讨论了。

文章标签：
JavaScript
前端开发
HTML5
移动开发
关键词：
HTML自定义
HTML canvas
HTML游戏
HTML开发实战
HTML Canvas游戏开发实战
华章计算机
目录
相关文章
疯狂的猿
|
15天前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片，自定义上传头像，自定义输入个人信息内容，自定义图片名称，并将生成的图片保存到本地
疯狂的猿
31 1
利用html2canvas插件自定义生成名片信息并保存图片
疯狂的猿
|
21天前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
疯狂的猿
23 5
net936
|
4月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
net936
101 0
六卿
|
2月前
|
前端开发
Twaver-HTML5基础学习(28)工具条(添加自定义按钮_自定义事件)
这篇文章介绍了如何在Twaver-HTML5中创建工具条，添加自定义按钮，并绑定自定义事件，包括放大、缩小、占满屏幕和重置画布大小的功能。
六卿
50 11
html的七十二变
|
2月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用，尤其在创建交互式网页游戏时。它支持多种场景，如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码，可实现流畅的拖放交互，并提供视觉反馈，增强用户体验。此外，还需考虑设备兼容性和数据管理，确保游戏在不同设备和浏览器上都能良好运行。总之，HTML5拖放功能使网页游戏更生动有趣。
html的七十二变
44 3
html的七十二变
|
2月前
|
XML 移动开发 前端开发
HTML5 SVG和canvas的性能探讨
HTML5 中的 SVG（可缩放矢量图形）和 Canvas（画布）分别用于网页图形绘制。SVG 基于矢量图形，使用 XML 描述，适合静态或少量动态内容（如图标、图表），易于编辑且保持高分辨率；Canvas 则基于位图，通过 JavaScript 绘制，更适合快速更新大量图形的场景（如游戏、动态动画），但在复杂图形计算时可能遇到性能瓶颈。总体而言，SVG 适用于静态和少量动态内容，而 Canvas 更适合高频率更新和性能要求高的场景。
html的七十二变
84 3
html的七十二变
|
2月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `&lt;canvas&gt;` 元素，并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本，以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
html的七十二变
42 3
游客qeoynko2nmbgk
|
2月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布（Canvas）在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布（Canvas）在“圳品”信息系统网页上绘制显示饼图
游客qeoynko2nmbgk
32 0
疯狂的猿
|
2月前
|
数据安全/隐私保护
自定义密码访问单页HTML源码
自定义密码访问单页HTML源码，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面
疯狂的猿
50 1
疯狂的猿
|
3月前
|
数据安全/隐私保护
自定义密码访问跳转页面HTML源码
自定义密码访问跳转页面HTML源码,源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面
疯狂的猿
52 0
自定义密码访问跳转页面HTML源码