canvas绘画板，原文标题：通过canvas实现一个简易的电子画板。

通过canvas可以进行画图实现一些动画效果等，今天练习下通过canvas来实现一个简易的电子画板，可以在白板上进行画画，然后指定不同的颜色、线条粗细，加载不同的背景以及擦除效果。

功能划分

线条涂抹
可以擦除指定区域画布
清除画布
可以保存到图片下载
可以指定不同的颜色的线条
可以指定线条的宽度

canvas功能点

根据以上操作，实际上用到的函数比较少，主要是:

clearRect 清除某位置区域的画布
drawImage 加载图片到画布中
lineTo 划线

基本上就用到了这么几个，因为功能比较简单，所以用到的函数比较少。

大体思路

思路的话，其实就是初始化canvas元素，由于需要加载背景图层，所以设置两个canvas元素，底层用来加载背景，上层用来绘画。用到的事件的话就是onmousedown onmousemove onmouseup 三个事件，初始化的时候监听下这几个事件即可。然后根据event中的坐标，来绘制线条以及清除画布。

代码实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画板</title> <style> html,body{ margin:0px; padding: 0px; height:100%; width: 100%; overflow: hidden; } canvas{ height:100%; width:100%; position:absolute; left:0px; top:0px; z-index:100; background-color: transparent; } #bg{ background-color: #49e; z-index:10; } .tool>span{ display:inline-block; position:absolute; width:100px; height:30px; border:1px solid #f2f2f2; text-align:center; line-height:30px; color:#f2f2f2; cursor:pointer; } .draw{left:10px;top:10px;} .clear{left:150px;top:10px;} .empty{left:300px;top:10px;} .tianzige{left:450px;top:10px;} .hengxian{left:600px;top:10px;} .screen{left:750px;top:10px;} .tool{ position:absolute; left:0px; top:0px; z-index:99999; } .color{ position:absolute; right:0px; top:0px; width:110px; z-index:9999; height:100px; } .color>span{ display:inline-block; height:20px; margin:2px; width:50px; line-height:20px; text-align:center; float:left; cursor:pointer; font-size:12px; } .c1{background-color:red;color:white;} .c2{background-color:yellow;color:#333;} .c3{background-color:#333;color:white;} .c4{background-color:green;color:white;} .c5{background-color:white;color:#333;} .c6{background-color:purple;color:#f2f2f2;} .linewidth{ position:absolute; top:80px; right:0px; width:110px; height:100px; z-index:09999; } .linewidth>span{ width:100%; display:inline-block; margin-bottom:5px; cursor:pointer; background-color:white; } .line1{height:5px;} .line2{height:10px;} .line3{height:20px;} </style></head><body> <div class="tool"> <span class="draw" onclick="draw()">画笔</span> <span class="clear" onclick="xiangpi()">橡皮</span> <span class="empty" onclick="empty()">清除</span> <span class="tianzige" onclick="tianzige()">田字格</span> <span class="hengxian" onclick="hengxian()">横线</span> <span class="screen" onclick="screena()">截屏</span> </div> <div class="color"> <span class="c1" onclick="changeColor('red')">红</span> <span class="c2" onclick="changeColor('yellow')">黄</span> <span class="c3" onclick="changeColor('#333')">黑</span> <span class="c4" onclick="changeColor('green')">绿</span> <span class="c5" onclick="changeColor('white')">白</span> <span class="c6" onclick="changeColor('purple')">紫</span> </div> <div class="linewidth"> <span class="line1" onclick="changeWidth(5)"></span> <span class="line2" onclick="changeWidth(10)"></span> <span class="line3" onclick="changeWidth(20)"></span> </div></body></html>

以上是html以及css样式，主要是针对一些按钮、设置、样式进行处理。大体效果如下：

效果图

然后针对canvas进行初始化以及事件绑定处理:

//初始化几个参数，后续可以通过用户点击按钮进行改变。var status = 'draw';//'draw' 'clear' var dotWidth = 50;var color = 'white';var lineWidth = 5;var canvas = { //canvas初始化 init () { this.ele = document.createElement('canvas'); document.body.appendChild(this.ele); this.ctx = this.ele.getContext('2d'); //背景图层 this.floor = document.createElement('canvas'); this.floor.id = 'bg'; document.body.appendChild(this.floor); this.floorCtx = this.floor.getContext('2d'); //设定canvas的宽高 this.width = this.ele.width = this.floor.width = window.innerWidth; this.height = this.ele.height = this.floor.height = window.innerHeight; return this; }, get (){ return this; }, //加载背景图层 drawImage (imgPath){ var that = this; // that.floorCxt.clearRect(0,0,that.width,that.height); var img = new Image(); img.src = imgPath; img.onload = function(){ that.floorCtx.clearRect(0,0,that.width,that.height); that.floorCtx.drawImage(img,that.width/2 - 500,that.height/2 - 100); } }, //事件绑定：鼠标按钮、鼠标移动、鼠标弹起 bind(){ let ctx = this.ctx; let startDraw = false;//标识是否开始绘制 this.ele.onmousedown = function(ev){ startDraw = true; var x = ev.clientX,y = ev.clientY; ctx.beginPath(); } this.ele.onmousemove = function(ev){ if(startDraw){ console.log(status); var x = ev.clientX,y = ev.clientY; if(status == 'draw'){ ctx.strokeStyle = color; ctx.lineWidth = lineWidth; ctx.lineTo(x,y); ctx.stroke(); }else if(status == 'clear'){ //清除 ctx.strokeStyle = 'rgba(0,0,0,1)'; ctx.clearRect(x - 40,y - 40,80,80); } } } this.ele.onmouseup = function(){ ctx.closePath(); startDraw = false; } }}canvas.init().bind();

核心的绘画、移动已经可以了，剩下都是一些边边角角，增加一些点击事件即可，包括该表颜色、线条宽度以及操作状态等。

//改变全局状态的颜色function changeColor(c){ color = c;}//切换绘画/清除状态function draw(){ console.log('abc'); status = 'draw';}//切换绘画/清除状态function xiangpi(){ console.log('aaa'); status = 'clear';}//改变线条宽度function changeWidth(w){ lineWidth = w;}//加载背景图片function tianzige(){ canvas.get().drawImage('bg.png');}function hengxian(){ canvas.get().drawImage('line.png'); }//清空画布function empty(){ var ins = canvas.get(); ins.ctx.clearRect(0,0,ins.width,ins.height);}//保存图片function screena(){ //设置保存图片的类型 var type = 'jpg'; var imgdata = canvas.get().ele.toDataURL(type); //将mime-type改为image/octet-stream,强制让浏览器下载 var fixtype = function (type) { type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' r; } imgdata = imgdata.replace(fixtype(type), 'image/octet-stream') //将图片保存到本地 var saveFile = function (data, filename) { var link = document.createElement('a'); link.href = data; link.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); link.dispatchEvent(event); } var filename = new Date().toLocaleDateString() '.' type; saveFile(imgdata, filename);}

以上就已经通过canvas实现了一个简易的电子画板小工具，当然，目前仅仅是个Demo，用到生产是绝对不行滴。

本文《canvas绘画板（canvas 画板）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

SEO教程
站长导航
友情链接交换
关键词排名优化
GEO培训
SEO小小课堂网
搜素引擎算法
关键词排名优化

百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：莱德小分队，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/400157.html

canvas绘画板（canvas 画板）

功能划分

canvas功能点

大体思路

代码实现

随机文章

发表评论