【JavaScript】基于H5 canvas实现的画板绘图工具（类似你画我猜）—

本来想尝试用做一个网页版的美图秀秀，可以导入的对图片进行处理，还有制作一些模板可以快速生成人物的表情包，但是做着做着，发现太耗时间了。结果最终只是简单做了一个基于 canvas 的画板。

github地址：https://github.com/linhongbijkm/canvasPainter

在线DEMO：https://linhongbijkm.github.io/canvasPainter/cvs.html

单纯实现 canvas 绘画功能还是比较简单的，以下我只大概说一下绘画功能的实现，至于页面中还包括颜色选择器、图像保存到本地的功能，请到 github 代码仓库下载下来看看。

一、canvas 标签

这个标签定义了一个画布，然后是要用 JavaScript 来调用浏览器 API 来在画布上绘图，所以第一步，就是在页面上加入 canvas 标签；

 <body><canvas id="canvas" width="800px" height="600px"></canvas></body>

二、读取画布

跟 JS 获取其他元素一样，根据 canvas 标签定义的 id 值，用原生函数来选取 canvas 元素，然后调用 getContext('2d') 获取画布环境对象，之后对画布绘图的 API 都由环境对象来调用；

 <script>var canvas = document.getElementById('canvas');var cvs = canvas.getContext('2d');</script>

三、定义画笔的颜色和粗细

 var penWeight = 1;     //画笔粗细var penColor = '#f00'; //画笔颜色

四、监听鼠标点下时事件

鼠标一点下，就开始一次绘画，画笔的起始点是当前鼠标位置，同时设置画笔的属性；

 canvas.onmousedown = function(e){/*找到鼠标（画笔）的坐标*/var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;cvs.beginPath(); //开始本次绘画cvs.moveTo(start_x, start_y);   //画笔起始点/*设置画笔属性*/cvs.lineCap = 'round';cvs.lineJoin ="round";cvs.strokeStyle = penColor;     //画笔颜色cvs.lineWidth = penWeight;       //画笔粗细/*监听鼠标移动事件*//*监听鼠标松开事件*/}

五、监听鼠标移动和松开事件

为了节省性能，在鼠标松开时候，取消鼠标按住和移动的监听，也就是只有鼠标按下时才监听鼠标移动和松开事件；

 canvas.onmousemove = function(e){/*找到鼠标（画笔）的坐标*/var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;cvs.lineTo(move_x, move_y);    //根据鼠标路径绘画cvs.stroke(); //立即渲染}canvas.onmouseup = function(e){cvs.closePath(); //结束本次绘画canvas.onmousemove = null;canvas.onmouseup = null;}

整合以上五点，单纯绘图功能的代码如下：

（注：不包含颜色选取、橡皮擦、清空画布功能。如果需要完整版，请到github下载，地址在本文最前面）

<body><canvas id="canvas" width="800px" height="600px"></canvas>
</body><script>var canvas = document.getElementById('canvas');var cvs = canvas.getContext('2d');var penWeight = 1;       //画笔粗细var penColor = '#f00'; //画笔颜色canvas.onmousedown = function(e){/*找到鼠标（画笔）的坐标*/var start_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;var start_y = e.clientY - canvas.offsetTop + document.body.scrollTop;cvs.beginPath();   //开始本次绘画cvs.moveTo(start_x, start_y);   //画笔起始点/*设置画笔属性*/cvs.lineCap = 'round';cvs.lineJoin ="round";cvs.strokeStyle = penColor;     //画笔颜色cvs.lineWidth = penWeight;       //画笔粗细canvas.onmousemove = function(e){/*找到鼠标（画笔）的坐标*/var move_x = e.clientX - canvas.offsetLeft + document.body.scrollLeft;var move_y = e.clientY - canvas.offsetTop + document.body.scrollTop;cvs.lineTo(move_x, move_y);      //根据鼠标路径绘画cvs.stroke(); //立即渲染}canvas.onmouseup = function(e){cvs.closePath(); //结束本次绘画canvas.onmousemove = null;canvas.onmouseup = null;}}
</script>

运行一下代码看看，比完整版简陋很多：

【JavaScript】基于H5 canvas实现的画板绘图工具（类似你画我猜）——整合颜色选取、保存图片到本地功能相关推荐

移动端canvas画板绘图工具
移动端canvas画板绘图工具原生js canvas画板可在移动端使用,使用鼠标或者手指触屏绘画各种图形效果. 演示地址下载地址
基于HTML5 Canvas和jQuery 的画图工具的实现
简介 HTML5 提供了强大的Canvas元素,使用Canvas并结合Javascript 可以实现一些非常强大的功能.本文就介绍一下基于HTML5 Canvas 的画图工具的实现.废话少说,先看成品 ...
用canvas实现一个简易绘图工具
先看效果这里可以选择颜色,从而进行在600px*400px画布中,随便画 ★HTML架构部分  <div><h3>简易绘图工具& ...
webrtc+canvas+socket.io从零实现一个你画我猜 | 掘金技术征文
开场白最近键盘坏了,刚好看到掘金有声网的技术征文,想整个键盘.于是就开始从零开始学习webrtc, 一开始看文档就是个素质三连.这么难啊,这咋整啊,这谁顶的住啊.于是就开始全网找资料,很幸运的在掘金 ...
canvas+websocket+vue做一个完整的你画我猜小游戏
第一次在掘金发文章,瑟瑟发抖. 这个主要是为了学习使用一下canvas和websocket,项目地址.求star- 你画我猜大家应该都玩过,一个人画,其他人猜.目前实现了最基本的功能,慢慢修改. 项目 ...
基于h5 canvas的模拟时钟javascript程序
资源下载地址:https://download.csdn.net/download/sheziqiong/85723236 资源下载地址:https://download.csdn.net/downl ...
绘制六芒星战斗力属性图 —— h5 canvas 初体验
在黄金的沙滩上安息着远古的悲剧在深绿的波涌中停着灵魂的船 --<眼睛>,顾城最近用MUI做Web app时想实现一个六芒星战斗力图的(类似LPL赛前战队实力分析图)效果,由于正多边 ...
几何画板自定义工具_可能是全网最详细：12 款 iPad 绘画工具横评，总有一款适合你...
自从上次写完 Procreate 的两篇教程后,我收到了许多读者的反馈,很开心.然后我注意到有部分读者提到自己不太能适应 Procreate 的一些功能和画笔效果. 也难免,虽然 Procreate ...
快速上手！7款简单易用的在线绘图工具推荐
随着科技的迅猛发展,越来越多的工作需要依赖电脑完成,而画图软件已经成为工作中不可或缺的一部分. 从过去简陋的Microsoft Paint到如今功能强大的Adobe Illustrator和即时设计等 ...

【JavaScript】基于H5 canvas实现的画板绘图工具（类似你画我猜）——整合颜色选取、保存图片到本地功能

【JavaScript】基于H5 canvas实现的画板绘图工具（类似你画我猜）——整合颜色选取、保存图片到本地功能相关推荐

最新文章

热门文章