canvas 橡皮擦效果制作
擦除一定数量后全部消失的有用 imageData 方法的 我把代码贴在最下面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <style type="text/css">
body{
overflow: hidden;
}
#canvas{
display: block;
margin: 0 auto;
border: 2px solid #008000;
background: url(img2.jpg) no-repeat;
background-size: cover;
}
*{margin: 0;padding: 0;}
</style>
</head>
<body> <canvas id="canvas" width="800" height="400"></canvas> </body> <script type="text/javascript"> var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d'); cvs.width = window.innerWidth;
cvs.height = window.innerHeight; var cvsWidth = cvs.width;
var cvsHeight = cvs.height;
var iNow = false;
var r = 30;
var num = 0;
var img =new Image()
img.src="img1.jpg" var hastouch = "ontouchstart" in window?true:false,
tapstart = hastouch?"touchstart":"mousedown",
tapmove = hastouch?"touchmove":"mousemove",
tapend = hastouch?"touchend":"mouseup"; img.onload = function(){
bottomImg();
clickDraw();
}
function bottomImg(){
ctx.drawImage(img,0,0,cvsWidth,cvsHeight)
}
function clickDraw(){
cvs.addEventListener(tapstart,function(e){ e.preventDefault(); x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop; ctx.lineCap = "round"; //设置线条两端为圆弧
ctx.lineJoin = "round"; //设置线条转折为圆弧
ctx.lineWidth = r*2;
ctx.globalCompositeOperation = "destination-out"; ctx.save();
ctx.beginPath()
ctx.arc(x1,y1,1,0,2*Math.PI);
ctx.fill();
ctx.restore(); iNow = true;
cvs.addEventListener(tapmove,function(e){
e.preventDefault()
if( iNow ){
var lx = hastouch?e.targetTouches[0].pageX:e.clientX-cvs.offsetLeft;
var ly = hastouch?e.targetTouches[0].pageY:e.clientY-cvs.offsetTop;
round(lx,ly)
num++
console.log(num);
num>500?ctx.clearRect(0,0,cvsWidth,cvsHeight):''
}
})
})
cvs.addEventListener(tapend,function(){
iNow = false;
})
}
function round(ex,ey){
x2 = ex
y2 = ey ctx.save();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
ctx.restore() x1 = x2;
y1 = y2;
} </script>
</html>
以下是使用getImageData方式消除剩余部分
//通过修改globalCompositeOperation来达到擦除的效果
function tapClip(){
var hastouch = "ontouchstart" in window?true:false,
tapstart = hastouch?"touchstart":"mousedown",
tapmove = hastouch?"touchmove":"mousemove",
tapend = hastouch?"touchend":"mouseup"; canvas.addEventListener(tapstart , function(e){
clearTimeout(timeout)
e.preventDefault(); x1 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y1 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop; ctx.lineCap = "round"; //设置线条两端为圆弧
ctx.lineJoin = "round"; //设置线条转折为圆弧
ctx.lineWidth = a*2;
ctx.globalCompositeOperation = "destination-out"; ctx.save();
ctx.beginPath()
ctx.arc(x1,y1,1,0,2*Math.PI);
ctx.fill();
ctx.restore(); canvas.addEventListener(tapmove , tapmoveHandler);
canvas.addEventListener(tapend , function(){
canvas.removeEventListener(tapmove , tapmoveHandler); timeout = setTimeout(function(){
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
var dd = 0;
for(var x=0;x<imgData.width;x+=30){
for(var y=0;y<imgData.height;y+=30){
var i = (y*imgData.width + x)*4;
if(imgData.data[i+3] > 0){
dd++
}
}
}
if(dd/(imgData.width*imgData.height/900)<.4){
canvas.className = "noOp";
}
},100)
});
function tapmoveHandler(e){
e.preventDefault()
x2 = hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;
y2 = hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop; ctx.save();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
ctx.restore() x1 = x2;
y1 = y2;
}
})
}
canvas 橡皮擦效果制作的更多相关文章
- 2015.4.25-2015.5.1 字符串去重，比例圆设计，中奖机和canvas橡皮擦效果等
1.字符串去重,html模板取值 2.javascript正则表达式之$1...$9 3.jquery插件 4.返回上一页并刷新 解决方法: <a href ="javas ...
- Canvas 橡皮擦效果
引子 解决了第一个问题图像灰度处理之后,接着就是做擦除的效果. Origin My GitHub 思路 一开始想到 Canvas 的画布可以相互覆盖的特性,彩色原图作为背景,灰度图渲染到 Canvas ...
- Unity 实现橡皮擦效果
我所实现的橡皮擦效果是设置图片某点的像素的透明度为0,来简单实现擦除效果的: 下面是效果 首先需要注意两点:1:设置 Main Camera 的 projection 属性为Orthographic ...
- 10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
- CodePen 作品秀：Canvas 粒子效果文本动画
作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...
- 模仿京东顶部搜索条效果制作的一个小demo
最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...
- HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
- HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET
HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示
- HTML5 Canvas动画效果实现原理
在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...
随机推荐
- java面试题之死锁产生的条件，以及如何避免死锁，银行家算法，产生死锁后如何解决（阿里面试题）
死锁产生的四个必要条件: 互斥:一个资源每次只能被一个进程使用(资源独立) 请求与保持:一个进程因请求资源而阻塞时,对已获得的资源保持不放(不释放锁) 不剥夺:进程已获得的资源,在未使用之前,不能强行 ...
- 用户认证系统 django.contrib.auth模块
一 导入auth模块 from django.contrib.auth.models import User from django.contrib import auth auth模块的操作针对的就 ...
- Unity 过度光照贴图
背景:开关窗帘过程,让环境在亮和暗之间过度 事先烘培出亮.暗两张Lighting map.然后代码实现,窗帘开关由动作实现,而代码中通过动作执行进度来过度两张Lighting map void OnA ...
- DataSet用法一：添加代码创建的表DataTable，设置主键外键，读取及修改DataSet表中数据
原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...
- net4：MultiView（view）行为中的commmandname与commmandargument，ListBox的使用及移动操作
原文发布时间为:2008-07-29 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...
- python3基础语法(标识符，注释，数据类型，获取用户输出，代码块，python保留字)
编码 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串. 当然你也可以为源码文件指定不同的编码: # -*- coding: cp-1252 -*- ...
- web服务器部署
1.控制面板---打开关闭Windows服务功能---Interner信息服务--全选中 2.控制面板---防火墙--关闭防火墙---允许程序通过Windows防火墙---勾选“万维网服务http” ...
- AC日记——背包问题 V2 51nod 1086
有N种物品,每种物品的数量为C1,C2......Cn.从中任选若干件放在容量为W的背包里,每种物品的体积为W1,W2......Wn(Wi为整数),与之相对应的价值为P1,P2......Pn(Pi ...
- HDU 5266 pog loves szh III（区间LCA）
题目链接 pog loves szh III 题意就是 求一个区间所有点的$LCA$. 我们把$1$到$n$的$DFS$序全部求出来……然后设$i$的$DFS$序为$c[i]$,$pc[i]$为$c ...
- Feign详细使用-Spring Cloud学习第四天(非原创）
文章大纲 一.Feign是什么二.Feign的基本实现三.Feign的继承特性四.Feign配置详解五.项目源码与参考资料下载六.参考文章 一.Feign是什么 前面几篇文章我们详细的介绍了Rib ...