-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patheraser_rc.html
118 lines (108 loc) · 3.92 KB
/
eraser_rc.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Eraser</title>
<meta name="viewport" content="width=640,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />
<body>
<canvas></canvas>
<img id="lamp" src="img/souce_cover.jpg" /> </br>
<script>
(function(bodyStyle) {
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';
//
var down_up=0;
//新建立一个 图片对象
var img = new Image();
//找到 html里的 canvans对象
var canvas = document.querySelector('canvas');
//设置canvas背景为透明
canvas.style.backgroundColor = 'transparent';
//设置 canvas为绝对定位
canvas.style.position = 'absolute';
//当图片加载完毕时执行以下代码
img.addEventListener('load',
function(e) {
//绘图环境
var ctx;
//图片的宽
var w = img.width,
//图片的高
h = img.height;
//canvans 自身的左边距离
var offsetX = canvas.offsetLeft,
//canvans 自身的上边距离
offsetY = canvas.offsetTop;
//禁止按下
var mousedown = false;
function layer(ctx) {
//找到html元素当中的虚的图片
var img = document.getElementById("lamp");
//把此张作为canvans的贴图对象
var pat = ctx.createPattern(img, "repeat");
ctx.fillStyle = pat;
ctx.fillRect(0, 0, w, h);
//把这里的贴图 渲染到canvans当中
}
function eventDown(e) {
e.preventDefault();
mousedown = true;
}
function eventUp(e) {
down_up++;
e.preventDefault();
mousedown = false;
}
function eventMove(e) {
e.preventDefault();
if (mousedown) {
if (e.changedTouches) {
e = e.changedTouches[e.changedTouches.length - 1];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
//如果手指抬起 擦除超过2次则 全部清除
if(down_up>=2){
ctx. beginPath();
///ctx. arc(x, y, 20, 0, Math.PI * 2);
ctx.fillRect(0, 0, w, h);
ctx.fill();
ctx.closePath();
}else{
ctx. beginPath();
ctx. arc(x, y, 20, 0, Math.PI * 2);
//ctx.fillRect(x,y,150,100);
ctx.fill();
ctx.closePath();
}
}
}
//canvas的宽是 图片的宽
canvas.width = w;
//canvas的高是 图片的高
canvas.height = h;
//设置canvas的背景位 空图片对象里 （下边指定的图片）
canvas.style.backgroundImage = 'url(' + img.src + ')';
//设置canvas的2d 绘图环境
ctx = canvas.getContext('2d');
//canvas 填充透明
ctx.fillStyle = 'transparent';
//填充边界为 canvans的面积
ctx.fillRect(0, 0, w, h);
layer(ctx);
//在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
ctx.globalCompositeOperation = 'destination-out';
canvas.addEventListener('touchstart', eventDown);//手指按下
canvas.addEventListener('touchend', eventUp);//手指抬起
canvas.addEventListener('touchmove', eventMove);//手指移动
canvas.addEventListener('mousedown', eventDown);
canvas.addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove);
});
img.src = 'img/target_cover.jpg';
})(document.body.style);
</script>
<strong><h1>用鼠标和手指擦除上述图片，显示清晰的图片。</h1></strong>
</body>
</html>