canvas中的橡皮檫

由于项目需要，要做一个橡皮檫，刚开始不知道怎么开始，向同事请教，一个年长的同事说，以前有做过这样的东西，他的方法是，计算橡皮檫移动点与痕迹组成点的距离，距离少于多少的时候，就清除痕迹。刚开始，感觉这个很麻烦，不是最好的方法。于是在网上找了些资料，当看到canvas像素操作时，感觉这才是正确方法。通过遍历canvas上每个像素，将要清除的像素点的透明度设为0，就OK了。具体请看代码。

touchMove:           var clearX=touch.clientX -$("#canv").offset().left;     var clearY=touch.clientY -$("#canv").offset().top;     var imgdata = context.getImageData(clearX, clearY, 30, 30); //通过改变30，30可以改变橡皮的大小。            var pixels = imgdata.data;             // 遍历每个像素并将透明度设为0            for (var i=0;i<(clearY*30+clearX)*4; i+= 4){                pixels[i+3]=0;            }             // 在指定位置进行像素重绘            context.putImageData(imgdata, clearX, clearY);

canvas中的橡皮檫相关推荐

canvas实现涂鸦效果--橡皮檫和历史记录
利用canvas实现涂鸦效果,包括更换笔触大小颜色.换背景图.橡皮檫.历史记录.清屏等功能,并能保存涂鸦图片到本地. 由于篇幅问题,本文主要实现橡皮檫和历史记录功能,该部分功能不操作背景图片,最终效果 ...
使用canvas建立一个可以使用彩笔、橡皮檫的画板
使用canvas建立一个可以使用彩笔.橡皮檫的画板我参加了一个web学习班,因为了解到写博客可以有效提高我的知识掌握水平,所以决定从我学习的内容来入手,废话不多说,开始今天的学习. 首先我们要在&l ...
实现canvas圆形橡皮檫像素清空功能
由于项目里面需求一个圆形的橡皮檫功能,但是原生的canvas清空方法只有一个clearRect() 方法,这个方法只是可以提供矩形清空的方法. 根据项目需求,我们只能想办法实现,最后,通过百度想到的办 ...
html5橡皮檫特效
体验效果: http://keleyi.com/keleyi/phtml/html5/32.htm 效果描述: 有点像刮刮卡一样,在移动设备上,把某张图片刮掉显示出另一张图片.效果图如下: 这种刮图的 ...
PS基础入门（一.橡皮檫的介绍)
一.工具栏二. 橡皮檫橡皮檫,功能主要是清除像素,使图像变白或者变透明图标如下图所示按鼠标左键点击图标,就会出现以下菜单栏,点击对应的图标时,切换到对应的工具,同时在ps界面的上方会出现工具的 ...
白板的基本操作（画笔，橡皮檫、滚屏，颜色）
因工作需要研究了下白板的基础操作特地在此总结下,在这过程中碰到的一些问题和经验一起分享给大家希望对大家有帮助. 需要完成的功能:画笔.橡皮檫.滚屏.颜色这四个功能. 如图:以上方法就是在窗体的pa ...
canvas中的碰撞检测笔记
2019独角兽企业重金招聘Python工程师标准>>> canvas中的碰撞检测笔记时间 2016-01-19 08:29:00 博客园精华区原文 http://www. ...
canvas 中的元素拖拽
实验室要求实现在canvas的元素的拖拽,即在canvas放置一些图标,实现用户拖拽并连线. 需要的知识(1)canvas drawImage方法 function draw(){ var image ...
html2canvas input,html2canvas 将html绘制到canvas中 [不建议使用]
这个有很多隐藏的bug, 不太建议在生产环境中使用推荐使用vdom包装一层, 用fabric画到canvas中, 或者用后端去画, 再或者用无头浏览器去截图而且对于mac和windows的chro ...

canvas中的橡皮檫

canvas中的橡皮檫相关推荐

最新文章

热门文章