js canvas实现擦除效果示例代码


Posted in Javascript onApril 26, 2017

关于canvas的定义:

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

     画布是一个矩形区域,您可以控制其每一像素。

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

html代码:

<div class="container">

 <canvas id="canvas" width="200" height="50"></canvas>

 <div class="content">hello world</div>

</div>

设置一个父容器,里面包括canvas标签,用于遮罩,content用于显示擦除遮罩层之后的内容

ps:设置canvas元素需要加上width和height属性,这样绘制的图形才能按照正常尺寸显示,否则在css里面设置宽高,虽然canvas标签的大小会正常显示,绘制的图形则会按照缺省宽高比例放大缩小,缺省的高度是300px,宽度是150px。

创建context对象,getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

var canvas = document.getElementById(id);

var ctx=canvas.getContext('2d');

绘制一个能覆盖容器的矩形,rect() 方法创建矩形,fill()绘制图像,默认颜色为黑色,可以使用fillStyle属性设置其他颜色

ctx.rect(0,0,canvas.width,canvas.height);

ctx.fill();

图像绘制完成,下面是事件绑定,要实现擦除效果,pc上主要绑定鼠标事件,鼠标按下,启动擦除,鼠标松开,关闭擦除

canvas.addEventListener('mousedown', eventDown);

canvas.addEventListener('mouseup', eventUp);

canvas.addEventListener('mousemove', eventMove);

这里先设置一个变量,用以表示,鼠标是否处于按下的状态

var mousedown = false;

鼠标按下松开的事件比较简单,主要是设置状态参数

function eventDown(e){

 e.preventDefault();

 mousedown=true;

}

 

function eventUp(e){

 e.preventDefault();

 mousedown=false;

}

鼠标滑动事件,鼠标滑过的地方,以圆形区域清除图形

首先设置ctx.globalCompositeOperation = 'destination-out';

globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。

destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。

这个属性是在先后绘制图形情况下,设置两个图形的显示方式。

属性值如下

js canvas实现擦除效果示例代码

具体显示效果,红色矩形是(新)目标图像。蓝色矩形是源(旧)图像:

js canvas实现擦除效果示例代码

鼠标移动函数

function eventMove(e){

 e.preventDefault();

 if(mousedown) {

 var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0;

 var y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;

 ctx.beginPath();

 ctx.arc(x, y, 20, 0, Math.PI * 20);

 ctx.fill();

 }

}

arc() 方法创建弧/曲线(用于创建圆或部分圆),context.arc(x,y,r,sAngle,eAngle,counterclockwise);

ps:通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。

js canvas实现擦除效果示例代码

最终效果:

js canvas实现擦除效果示例代码

此方法只用于pc端,因为绑定的是鼠标事件,如果要在移动设备上也实现,需要绑定触摸事件

canvas.addEventListener('touchstart', eventDown);

canvas.addEventListener('touchend', eventUp);

canvas.addEventListener('touchmove', eventMove);

如果是触摸事件,返回的对象中没有直接的坐标相关信息,需要在changedTouches中去取到触摸事件对应的 Touch 对象。

if(e.changedTouches){

e=e.changedTouches[e.changedTouches.length-1];

}

补充更新

这里只实现了使用背景色遮罩的方法,补充一下使用图片作为遮罩的方法

var img = new Image();

img.src = 'cover.png';

创建一个图片对象,并设置图片地址,绘制图片到canvas元素需要使用到drawImage方法,具体使用方法可以参考: HTML5 canvas drawImage() 方法

这里使用的时候需要注意,图片加载是异步的,有时会加载的比较慢,在后续的绘制操作过程中,最好是在图片加载完成后再进行

img.onload = function() {

 ctx.drawImage(img, 0, 0,canvas.width, canvas.height);

 ctx.globalCompositeOperation = 'destination-out'; 

  //其他操作...

}

最终实现效果:

js canvas实现擦除效果示例代码

完整代码下载:

github地址: https://github.com/Martian1/erase.js

本地下载:http://xiazai.3water.com/201704/yuanma/erase.js-master(3water.com).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 Javascript
vue-cli如何快速构建vue项目
Apr 26 #Javascript
Vue制作Todo List网页
Apr 26 #Javascript
bootstrap table表格使用方法详解
Apr 26 #Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 #Javascript
windows下vue-cli导入bootstrap样式
Apr 25 #Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 #Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 #Javascript
You might like
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
javascript事件问题
2009/09/05 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
javascript常用的方法整理
2015/08/20 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
应届毕业生求职信
2013/11/30 职场文书
元旦晚会邀请函
2014/01/27 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
Redis基本数据类型String常用操作命令
2022/06/01 Redis
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android