Canvas实现画笔功能擦除画笔颜色但不擦除背景

注：
需要引入Jquery.js ！！！！！
功能演示：

html代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>DrawingBoard</title><script src="jquery.js"></script></head><body>选择画笔颜色：<input type="color" id="color" />选择画笔类型：画笔<input type="radio" name="way" value="hb" checked="true"/>，橡皮擦<input type="radio" name="way" value="xp" /><br><canvas id="oriCanvas" ></canvas><canvas id="dstCanvas" ></canvas></body><script>// --------- 加载图像 ----------var oriCanvas = document.getElementById("oriCanvas");var dstCanvas = document.getElementById("dstCanvas");var dstCtx = dstCanvas.getContext("2d");var oriCtx = oriCanvas.getContext("2d");var image = new Image();image.src = "C:\\Users\\Administrator\\Desktop\\1.jpg";image.onload = function(){dstCanvas.width = this.width;dstCanvas.height = this.height;dstCtx.drawImage(this, 0, 0);oriCanvas.width = this.width;oriCanvas.height = this.height;oriCtx.drawImage(this, 0, 0);}// --------- 加载图像 ----------// --------- 画笔和橡皮擦功能实现 -------------var flag = false;  // 记录鼠标按下和抬起时间  标记画笔是否开始工作var isXp = false; // 记录画笔是橡皮还是画笔var lineWidth = 50; // 设置画笔粗细// 设置画笔颜色var theColor=document.getElementById("color");theColor.onchange=function(){dstCtx.strokeStyle=this.value;}$('input[type=radio][name=way]').change(function() {if (this.value == 'xp') {isXp = true;}else if (this.value == 'hb') {isXp = false;}});dstCanvas.onmousedown=function(eva){var eva=eva||window.event;dstCtx.lineCap="round";dstCtx.lineJoin="round";var x=eva.offsetX;var y=eva.offsetY;dstCtx.beginPath();dstCtx.moveTo(x,y);flag=true;dstCtx.lineWidth = lineWidth;     dstCtx.strokeStyle= document.getElementById("color").value;}dstCanvas.onmousemove=function(eva){if(flag){ if(isXp){var w = lineWidth;let pxs = oriCtx.getImageData(eva.offsetX-w/2, eva.offsetY-w/2, w, w);dstCtx.putImageData(pxs, eva.offsetX-w/2, eva.offsetY-w/2);}else{var eva=eva||window.event;var x=eva.offsetX;var y=eva.offsetY;dstCtx.lineTo(x,y);dstCtx.stroke();}}}dstCanvas.onmouseup=function(){flag=false;dstCtx.closePath();}dstCanvas.onmouseleave=function(){flag=false;dstCtx.closePath();}// --------- 画笔和橡皮擦功能实现 -------------</script></html>

Canvas实现画笔功能擦除画笔颜色但不擦除背景相关推荐

巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保存
canvas 是HTML5的元素,使用JavaScript 在网页上绘制图像. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 而如果想实现画笔在画板涂画画笔在图片上涂画,橡皮擦 ...
android画笔大小,android之画板功能之橡皮擦画笔大小和画笔颜色
第一展示设置画笔颜色的功能,第二展示设置画笔大小的颜色,而第三则展示橡皮擦的功能,这节将图标颜色设置为了蓝色,并且,增加了最左边的按钮(其实,就是在gridview中多增加了一个item). 下面分别 ...
android绘制view的撤销,DrawingView android 上的一个涂鸦控件。可以设置画笔的粗细，颜色，撤销上一笔涂鸦，提供保存图片的接口。 @codeKK Android开源站...
DrawingView 的原型来自DrawingView-Android,是 android 的一个可涂鸦控件. 之所以做这个控件是因为前段时间写了一个截图应用需要用到涂鸦功能,现在把涂鸦的控件单独拿 ...
MFC 画笔功能实现
一.4个消息处理如果是在VS2012上,我们可以很方便的在对话框的属性栏找到消息页面添加消息如果是以前的VC6的版本,那还是得老老实实使用Class Wizzard类向导添加消息左键按下.抬起. ...
【Scratch】青少年蓝桥杯_每日一题_11.01_画笔功能
用心写好每一篇文章效果图一.题目背景通过编程实现具有画笔功能的程序﹐按下鼠标画笔跟随鼠标移动﹐抬起鼠标画笔停止绘制. 二.编程实现 1)运行程序,清空屏幕﹐画笔角色隐藏; 2)在舞台区域按下鼠标 ...
【分享】用Canvas实现画板功能
前言 PC端测试:QQ浏览器全屏绘画完成.缩小时内容会被清空,切换背景颜色内容会被重置,其他暂无发现: 手机端测试:微信内置浏览器不通过:Safari 浏览器使用画笔时没固定页面会有抖动效果,使用橡皮 ...
要绘图，首先得调整画笔，待画笔调整好之后，再将图像绘制到画布上，这样才可以显示在手机屏幕上。Android 中的画笔是 Paint类，Paint 中包含了很多方法对其属性进行设置，主要方法（没有全部列
要绘图,首先得调整画笔,待画笔调整好之后,再将图像绘制到画布上,这样才可以显示在手机屏幕上.Android 中的画笔是 Paint类,Paint 中包含了很多方法对其属性进行设置,主要方法(没有全部列 ...
php怎么实现弹幕,HTML如何利用canvas实现弹幕功能
本篇文章主要介绍HTML如何利用canvas实现弹幕功能,感兴趣的朋友参考下,希望对大家有所帮助. 简介最近在做大作业的时候需要做一个弹幕播放器.借鉴了一下别人的源码自己重新实现了一个,演示如下主 ...
基于canvas剪辑区域功能实现橡皮擦效果
这篇文章主要介绍了基于canvas剪辑区域功能实现橡皮擦效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下这是基础结构没什么好说的 ?<!DOCTYPE html> <htm ...

Canvas实现画笔功能擦除画笔颜色但不擦除背景

Canvas实现画笔功能擦除画笔颜色但不擦除背景相关推荐

最新文章

热门文章

Canvas实现画笔功能 擦除画笔颜色但不擦除背景

Canvas实现画笔功能 擦除画笔颜色但不擦除背景相关推荐

最新文章

热门文章

Canvas实现画笔功能擦除画笔颜色但不擦除背景

Canvas实现画笔功能擦除画笔颜色但不擦除背景相关推荐