h5+js 画板canvas

最新推荐文章于 2024-07-17 15:37:36 发布

Amin_won

最新推荐文章于 2024-07-17 15:37:36 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： html5 javascript 纯js canvas

本文链接：https://blog.csdn.net/Amin_won/article/details/77371481

版权

本文介绍如何利用HTML5的canvas元素和JavaScript实现一个简单的在线画板应用。支持更换画笔颜色、调整画笔粗细、保存和清除画板内容。通过为颜色和粗细选择项绑定事件，实现实时改变画笔属性，同时通过监听鼠标事件来绘制图形，并提供保存和清除功能。

摘要由CSDN通过智能技术生成

1 概述
随着前端技术的发展，越来越多的H5技术被应用到实际开发中，本例讲述js应用到画板中，在本例中，可以改变画笔的颜色，调整画笔的粗细，清除画板内容，保存画板内容。
2 效果图如下：

3 主要功能
支持超简单使用
支持换画笔颜色
支持换画笔粗细
支持保存画板内容
支持清楚画板内容
。。。后续功能可以自己酌情添加

4实现方式
首先，我们需要两个div，分别承放各种颜色的画笔图片和可选择的画笔粗细图片。通过div的id就可以识别容器。代码如下：

<div id="pens">
<img src="img/red.gif"  id="red"  οnclick="changecolor(this)"/>
<img src="img/green.gif"  id="blue" οnclick="changecolor(this)"/>
<img src="img/blue.gif"  id="green" οnclick="changecolor(this)"/>
</div>
<div id="cx">
<img src="img/pen-thin.gif"  id="thin" οnclick="changecx(this)"/>
<img src="img/pen-medium.gif"  id="medium" οnclick="changecx(this)"/>
<img src="img/pen-thick.gif"  id="thick" οnclick="changecx(this)"/>
</div>

然后，我们需要一个画板，在这里只需要一个canvas就可以了，通过canvas的id就可以识别该容器，代码如下

<canvas width="500" height="300" id="can"></canvas>

接着我们放入一个div用来存放两个按钮(保存和清除),代码如下：

<div id="act">
    <input type="button" value="保存" οnclick="saveimg()"/>
    <input type="button" value="清除" οnclick="clearimg()"/>
</div>

接着就是在页面右侧放入一个div用于存放保存的img和清除按钮。代码如下：

<div class="saveimg">
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <img src="" alt=""style="width: 200px;height: 100px"/>
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <img src="" alt="" style="width: 200px;height: 100px"/>
    <input type="button" value="清除" οnclic