巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保存

canvas 是HTML5的元素，使用JavaScript 在网页上绘制图像。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

而如果想实现画笔在画板涂画画笔在图片上涂画，橡皮擦可擦除涂画，就需要两个canvas画布配合。

原理就是两个一样大小的canvas画布重叠放置，并且都绘制这个图画，这样只在上面的canvas涂画、擦除，擦除时把下层canvas内容替换上层的canvas内容，达到模仿橡皮擦效果。

下面就是具体实现代码：

1、先准备画布和工具：

<canvas id="canvas1" width="600" height="500"></canvas>
<canvas id="canvas2" width="600" height="500"></canvas>
<div class="tooltip-pen"><b><i class="ico ico-pen" title="铅笔" onclick="changeTools('pen');"></i><i class="ico ico-eraser" title="橡皮檫" onclick="changeTools('eraser');"></i><i class="ico ico-save" title="保存" onclick="downloadImg();"></i></b>
</div>

2、画布、工具样式，以便正常显示、使用：

<style>#canvas1{position: absolute;background-image: url("./image/20200108173011.jpg");z-index: 997;}#canvas2{position: absolute;background-image: url("./image/20200108173011.jpg");z-index: 998;}.tooltip-pen{position: fixed;width: 40px;height: 125px;top: 5%;left: 650px;z-index: 999;background-color: #737373;border-radius: 5px;}.ico{display: inline-block;width: 40px;height: 40px;}.ico-pen {background-image: url("./image/pencil.png");background-size: 100% 100%;background-repeat: no-repeat;background-position: top center;}.ico-eraser {background-image: url("./image/eraser.png");background-size: 100% 100%;background-repeat: no-repeat;background-position: top center;}.ico-save{background-image: url("./image/save.png");background-size: 100% 100%;background-repeat: no-repeat;background-position: top center;}
</style>

3、重点是JS控制涂画、擦除：

原理就是通过获取鼠标移动轨迹（移动位置：x坐标，y坐标），在画布上创建这段轨迹的线条。

<script>var canvas1 = document.getElementById("canvas1");var canvas2 = document.getElementById("canvas2");var cs2Ctx = canvas2.getContext("2d");var cs1Ctx = canvas1.getContext("2d");// --------- 画笔和橡皮擦功能实现 -------------var flag = false;  // 记录鼠标按下和抬起事件，标记工具是否开始工作var isEraser; // 判断工具是画笔还是橡皮擦var lineWidth = 3; // 设置工具粗细// 设置画笔颜色var theColor = "#FF0000";theColor.onchange = function(){cs2Ctx.strokeStyle = this.value;}// 切换工具function changeTools(tname) {if (tname == 'eraser') {isEraser = true;lineWidth = 30;$(canvas2).css({ 'cursor': "url('./image/eraser_ss.png'),default" }); // 设置橡皮擦自定义鼠标样式} else if (tname == 'pen') {isEraser = false;lineWidth = 3;$(canvas2).css({ 'cursor': 'crosshair' }); // 设置画笔系统鼠标样式(十字)}}// onmousedown事件canvas2.onmousedown=function(eva){var eva = eva||window.event;cs2Ctx.lineCap = "round";cs2Ctx.lineJoin = "round";var x = eva.offsetX;var y = eva.offsetY;cs2Ctx.beginPath();cs2Ctx.moveTo(x,y);flag = true;cs2Ctx.lineWidth = lineWidth;cs2Ctx.strokeStyle = "#FF0000";}// onmousemove事件canvas2.onmousemove=function(eva){if(flag){if(isEraser){var w = lineWidth;// noinspection JSAnnotatorlet pxs = cs1Ctx.getImageData(eva.offsetX-w/2, eva.offsetY-w/2, w, w);cs2Ctx.putImageData(pxs, eva.offsetX-w/2, eva.offsetY-w/2);} else{var eva = eva||window.event;var x = eva.offsetX;var y = eva.offsetY;cs2Ctx.lineTo(x,y);cs2Ctx.stroke();}}}// onmouseup事件canvas2.onmouseup = function(){flag = false;cs2Ctx.closePath();}// onmouseleave事件canvas2.onmouseleave = function(){flag = false;cs2Ctx.closePath();}// --------- 画笔和橡皮擦功能实现 -------------// 保存画布function downloadImg() {var canvas = document.getElementById('canvas1');var alink = document.createElement("a");var imgSrc = canvas.toDataURL("image/png");alink.href = imgSrc;alink.download = Date.now() + ".png";alink.click();}
</script>

4、可以把画布保存成图片：

原理就是将canvas内容转成Base64格式，作为图片下载，当然也可以把Base64存储到数据库或其他地方，以后可加载它绘制到canvas画布上。

<script>// 保存画布function downloadImg() {var canvas = document.getElementById('canvas2');var alink = document.createElement("a");var imgSrc = canvas.toDataURL("image/png");alink.href = imgSrc;alink.download = Date.now() + ".png";alink.click();}
</script>

5、效果如图：

以上就是巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保持的实现。如有错误，请不吝指正。

另附：初始化画布，绘制图片代码

$(function () {var canvas1 = document.getElementById('canvas1');var ctx1 = canvas1.getContext("2d");var canvas2 = document.getElementById('canvas2');var ctx2 = canvas2.getContext("2d");var image = new Image();image.src = "./image/canvas_demo.png";image.onload = function(){canvas1.width = this.width;canvas1.height = this.height;ctx1.drawImage(this, 0, 0);canvas2.width = this.width;canvas2.height = this.height;ctx2.drawImage(this, 0, 0);}
});

巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保存相关推荐

前端学习笔记----canvas实现画板及定制画笔(画笔错位，撤回，粗细，颜色)
本期的小需求: 在页面中实现一个能进行绘画的画板能实现画笔颜色.粗细.撤回等功能开发环境 Vue + elementUI 采坑记录画笔与鼠标错位 (恶心很久)(样式设置长宽canvas导致) 画 ...
canvas换图时候会闪烁_Canvas实现图片上标注、缩放、移动和保存历史状态，纯干货（附CSS 3变化公式）...
(给前端大学加星标,提升前端技能.) 作者:zhcxk1998 https://juejin.im/user/5d4304bdf265da03d15531dc 哈哈哈俺又来啦,这次带来的是canvas ...
前端 HTML5 Svg 画板（支持视频、图片上涂鸦，支持缩放、修改、颜色、复选...）
GitHub 地址支持视频.图片上涂鸦,做标记画板功能支持矩形.圆形.椭圆.箭头.直线.文本,支持缩放.修改.调整字号颜色.移动位置....,画板数据支持上传保存,后续传入重新复原. 画板 ...
小程序_图片剪切功能（支持多图片上传）
前端图片剪切上传功能是常见的功能,在开发过程中,研发一个这样的功能要花的时间也会很多,现在把一个研发好了的图片剪切插件发出来.支持剪切和大小缩放. wxml 1  ...
php如何实现上传照片功能_php如何实现图片上传功能
php实现图片上传功能的方法:首先创建存储图片的文件夹:然后创建HTML部分:接着创建"uploadHandler.php"文件:最后将文件的图片格式与数组中的元素进行比较并实现上 ...
Android绘图实例(Bitmmap,Canvas,Pain的使用)动态的在图片上添加文字(canvas.drawText)
近些天学习图像处理,今天看见了一段代码中有Bitmap时,找了些Bitmap的资料,有查看了与之有关的绘图类. BitMap代表一张位图,BitmapDrawable里封装的图片就是一个Bitmap对 ...
Android动态添加5个图片资,Android绘图实例(Bitmmap,Canvas,Pain的使用)动态的在图片上添加文字(canvas.drawText)...
近些天学习图像处理,今天看见了一段代码中有Bitmap时,找了些Bitmap的资料,有查看了与之有关的绘图类. BitMap代表一张位图,BitmapDrawable里封装的图片就是一个Bitmap对 ...
HTML5 使用canvas实现画板功能(画笔颜色切换、粗细调整、清除图像)
标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形. 在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. HTML5 元素用于图形的绘制,通过脚本 (通常是Java ...
【分享】用Canvas实现画板功能
前言 PC端测试:QQ浏览器全屏绘画完成.缩小时内容会被清空,切换背景颜色内容会被重置,其他暂无发现: 手机端测试:微信内置浏览器不通过:Safari 浏览器使用画笔时没固定页面会有抖动效果,使用橡皮 ...

巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保存

巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保存相关推荐

最新文章

热门文章