-
Notifications
You must be signed in to change notification settings - Fork 0
/
2_11_custom_cutout.html
91 lines (76 loc) · 1.6 KB
/
2_11_custom_cutout.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2-11 Custom Cutout</title>
</head>
<body>
<canvas id="canvas" width="950" height="630"></canvas>
</body>
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
function rect(x, y, w, h, direction) {
if(direction) { // CCW
ctx.moveTo(x, y);
ctx.lineTo(x, y + h);
ctx.lineTo(x + w, y + h);
ctx.lineTo(x + w, y);
} else {
ctx.moveTo(x, y);
ctx.lineTo(x + w, y);
ctx.lineTo(x + w, y + h);
ctx.lineTo(x, y + h);
}
ctx.closePath();
}
function addOuterRectanglePath() {
ctx.rect(110, 25, 370, 335);
}
function addRectanglePath() {
rect(310, 55, 70, 35, true);
}
function addCriclePath() {
ctx.arc(300, 300, 40, 0, Math.PI*2, true);
}
function addTrianglePath() {
ctx.moveTo(400, 200);
ctx.lineTo(250, 115);
ctx.lineTo(200, 200);
ctx.closePath();
}
function strokeCutoutShapes() {
ctx.save();
ctx.strokeStyle = 'rgba(0, 0, 0, 0.7)';
ctx.beginPath();
addOuterRectanglePath(); // CW
ctx.stroke();
ctx.beginPath();
addCriclePath();
addRectanglePath();
addTrianglePath();
ctx.stroke();
ctx.restore();
}
function drawCutouts() {
ctx.beginPath();
addOuterRectanglePath(); // CW
addCriclePath(); // CCW
addRectanglePath(); // CCW
addTrianglePath(); // CCW
ctx.fill();
}
function draw() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.save();
ctx.shadowColor = 'rgba(200, 200, 0, 0.5)';
ctx.shadowOffsetX = 12;
ctx.shadowOffsetY = 12;
ctx.shadowBlur = 15;
drawCutouts();
ctx.restore();
}
ctx.fillStyle = 'goldenrod';
draw();
strokeCutoutShapes();
</script>
</html>