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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
JS异步处理的进化史深入讲解
Aug 25 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
php注销代码(session注销)
2012/05/31 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
python利用拉链法实现字典方法示例
2017/03/25 Python
python算法表示概念扫盲教程
2017/04/13 Python
在python中pandas的series合并方法
2018/11/12 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
tornado+celery的简单使用详解
2019/12/21 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
python字典按照value排序方法
2020/12/28 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
民事和解协议书格式
2014/11/29 职场文书
办公室文员岗位职责
2015/02/04 职场文书
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
Rust中的Struct使用示例详解
2022/08/14 Javascript