-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2_32_compositing.html
85 lines (76 loc) · 2.39 KB
/
2_32_compositing.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
<!doctype html>
<html>
<head>
<title>Compositing</title>
<style>
#canvas {
border: 1px solid cornflowerblue;
position: absolute;
left: 150px;
top: 10px;
background: #eeeeee;
border: thin solid #aaaaaa;
cursor: pointer;
-webkit-box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;
-moz-box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;
box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;
}
</style>
</head>
<body>
<select id='compositingSelect' size='11'>
<option value='source-atop'>source-atop</option>
<option value='source-in'>source-in</option>
<option value='source-out'>source-out</option>
<option value='source-over'>source-over (default)</option>
<option value='destination-atop'>destination-atop</option>
<option value='destination-in'>destination-in</option>
<option value='destination-out'>destination-out</option>
<option value='destination-over'>destination-over</option>
<option value='lighter'>lighter</option>
<option value='copy'>copy</option>
<option value='xor'>xor</option>
</select>
<canvas id="canvas" width="640" height="420"></canvas>
</body>
<script type="text/javascript">
var cvs = document.getElementById('canvas'),
ctx = cvs.getContext('2d'),
compositingSelect = document.getElementById('compositingSelect');
function drawText () {
ctx.save();
ctx.shadowColor = 'rgba(100, 100, 150, 0.8)';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 10;
ctx.fillStyle = 'cornflowerblue';
ctx.strkeStyle = 'yellow';
ctx.fillText('HTML5', 20, 250);
ctx.strokeText('HTML5', 20, 250);
ctx.restore();
}
function windowToCanvas (cvs, x, y) {
var rect = cvs.getBoundingClientRect();
return {
x : x - rect.left * (cvs.width / rect.width),
y : y - rect.top * (cvs.height / rect.height)
};
}
ctx.canvas.onmousemove = function (e) {
var loc = windowToCanvas(cvs, e.clientX, e.clientY);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
drawText();
ctx.save();
ctx.globalCompositeOperation = compositingSelect.value;
ctx.beginPath();
ctx.arc(loc.x, loc.y, 100, 0, 2*Math.PI, false);
ctx.fillStyle = 'orange'
ctx.fill();
ctx.restore();
}
compositingSelect.selectedIndex = 3;
ctx.lineWidth = 0.5;
ctx.font = '128pt Comic-sans';
drawText();
</script>
</html>