网站首页 网站建设 IT知识 IT知识教程 基于canvas剪辑区域功能实现橡皮擦效果

基于canvas剪辑区域功能实现橡皮擦效果

2021-05-22 21:23:03

效果如图

这是基础结构 没什么好说的

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{padding: 0;margin: 0} a{text-decoration: none} img{border: none} ul,ol{list-style: none} br{font-size: 0;line-height: 0;font-size: 0} canvas{border: 1px solid red;background: white} body{background: gray;text-align: center} </style></head><body> <div id='controls'> Stroke color: <select id='strokeStyleSelect'> <option value='red'>red</option> <option value='green'>green</option> <option value='blue'>blue</option> <option value='orange'>orange</option> <option value='cornflowerblue'>cornflowerblue</option> <option value='goldenrod'>goldenrod</option> <option value='navy' selected>navy</option> <option value='purple'>purple</option> <option value='purple'>purple</option> </select> Fill color: <select id='fillStyleSelect'> <option value='rgba(255,0,0,0.5)'>semi-transparent red</option> <option value='green'>green</option> <option value='rgba(0,0,255,0.5)'>semi-transparent blue</option> <option value='orange'>orange</option> <option value='rgba(100,140,230,0.5)'>semi-transparent cornflowerblue</option> <option value='goldenrod' selected>goldenrod</option> <option value='navy'>navy</option> <option value='purple'>purple</option> </select> Draw <input id='drawRadio' name='drawEraserRadios' type='radio' checked/> Erase <input id='eraserRadio' name='drawEraserRadios' type='radio'/> Eraser: <select id='eraserShapeSelect'> <option value='circle'>circle</option> <option value='square'>square</option> </select> Eraser width: <select id='eraserWidthSelect'> <option value=25>25</option> <option value=50>50</option> <option value=75>75</option> <option value=100>100</option> <option value=125>125</option> <option value=150>150</option> <option value=175>175</option> <option value=200>200</option> </select> </div> <canvas id="canvas" width="950" height="600"></canvas></body></html><script src="./js/test9.js"></script>

下面是重点的js

这里有个坑要十分注意 调用clip()方法的时候，所定义的剪辑区域总是局限于期初的那个剪辑区域范围。
简单来说 clip()方法总是在上一次的剪辑区域基础上进行操作，所以说我们要把clip()方法放在save()和restore()方法中

var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),strokeStyleSelect = document.getElementById('strokeStyleSelect'), //画图的描边颜色fillStyleSelect = document.getElementById('fillStyleSelect'), //画图填充颜色drawRadio = document.getElementById('drawRadio'), //画图按钮eraserRadio = document.getElementById('eraserRadio'), //橡皮擦按钮 eraserShapeSelect = document.getElementById('eraserShapeSelect'), //橡皮擦形状eraserWidthSelect = document.getElementById('eraserWidthSelect'), //橡皮擦宽度ERASER_LINE_WIDTH = 1,drawingSurfaceImageData,lastX,lastY,mousedown = {},rubberbandRect = {},dragging = falsefunction windowToCanvas(x,y){ //这个函数的作用是捕捉鼠标点在canvas上的坐标 var bbox=canvas.getBoundingClientRect() return { x:x-bbox.left, y:y-bbox.top }}function saveDrawingSurface(){ //这个函数的作用是初始化读取画布信息并储存起来 drawingSurfaceImageData=context.getImageData(0,0,canvas.width,canvas.height)}function restoreDrawingSurface(){ //这个函数的作用是读取画布信息 context.putImageData(drawingSurfaceImageData,0,0)}function drawGrid(){ //这个函数的作用是填充进橡皮擦的剪辑区域 context.save() context.fillStyle="#fff" context.fillRect(0,0,canvas.width,canvas.height) context.restore()}function drawrubber(x,y){ context.beginPath() context.arc(x,y,eraserWidthSelect.value,0,Math.PI*2,false) context.clip()}function drawCri(x,y){ var x_width=Math.abs(x-mousedown.x) var y_width=Math.abs(y-mousedown.y) var radius=Math.sqrt(x_width*x_width+y_width*y_width) context.save() context.beginPath() context.fillStyle=fillStyleSelect.value; context.arc(mousedown.x,mousedown.y,radius,0,Math.PI*2,false) context.fill() context.restore()}canvas.onmousedown=function(e){ var loc=windowToCanvas(e.clientX,e.clientY) mousedown.x=loc.x mousedown.y=loc.y lastX=loc.x lastY=loc.y saveDrawingSurface() dragging=true}canvas.onmousemove=function(e){ if(dragging){ var loc=windowToCanvas(e.clientX,e.clientY) if(drawRadio.checked){ //如果是画图状态 // restoreDrawingSurface() drawCri(loc.x,loc.y) }else{ //如果是橡皮擦状态 context.save() drawrubber(loc.x,loc.y) drawGrid() context.restore() } }}canvas.onmouseup=function(e){ dragging=false; var loc=windowToCanvas(e.clientX,e.clientY) if(drawRadio.checked){ lastX=loc.x; lastY=loc.y; restoreDrawingSurface() drawCri(lastX,lastY) }else{ context.save() drawrubber(loc.x,loc.y) drawGrid() context.restore() }}

总结

以上所述是小编给大家介绍的基于canvas剪辑区域功能实现橡皮擦效果，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章

js canvas实现橡皮擦效果
本文实例为大家分享了canvas实现橡皮擦效果的具体代码，供大家参考，具体内容如下html部分MyCanvas0.1html,body,div,img{marg
sketchbook橡皮擦在哪里
找到sketchbook橡皮擦的方法：　　1、sketchbook橡皮擦在笔的标志里，这里可以选择画笔，橡皮擦，透明度大小，半径大小。　　2、画笔一框有许多款式
ps橡皮擦怎么擦出透明
ps橡皮擦擦出透明图层的方法是：点击使用“背景橡皮擦工具”涂抹背景即可。　　AdobePhotoshop，简称“PS”，是由AdobeSystems开发和发行的
橡皮擦商标第几类
橡皮擦商标应该注册的类别是：　　第十六类-办公用品-1611-办公文具（不包括笔，墨，印，胶水)-橡皮擦160139。　　知识产权。
ps怎么把背景变成黑色
ps把背景变成黑色的方法如下：　　1、首先将需要修改的图片在PS软件里面打开。　　2、接着打开图片之后，点击左侧的魔术橡皮擦工具，选择了魔术橡皮擦工具之后，并将

最新文章

载入进度条 效果
邮件发送简单例子-html文件
详解关于html，css，js三者的加载顺序问题
限制复选框的最大可选数
随鼠标上下滚动的jquery代码

hot 热门文章

python模拟登陆Tom邮箱示例分享
苹果11抖音怎么投屏? iphone将投影投屏到电视的技巧
蚂蚁森林节气签怎么领
华为mate30怎么更新系统？华为mate30更新手机系统教程
小米电视怎么下载斗鱼

猜你喜欢

JavaScript 命名空间 使用介绍
javascript ���名规则 变量命名规则
javascript 秒表计时器实现代码
Javascript 面向对象之重载
JavaScript 面向对象之命名空间
以上产品还未完全满足我的所有需求，在下方提交我的专属需求
我的专属需求：
*手机号：
*验证码：
img
咨询报价
现在咨询
img

在线咨询

建站在线咨询
img

获取方案

获取建站报价/方案

我们联系您img

img

微信咨询

扫一扫添加
动力姐姐微信
img
img

TOP

我们尽快联系您