-
Notifications
You must be signed in to change notification settings - Fork 0
/
multishapes.html
65 lines (56 loc) · 1.74 KB
/
multishapes.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
<!DOCTYPE HTML>
<html>
<head>
<script>
function init(){
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
// Rectangle
context.fillStyle = "blue";
// fillRect(x, y, width, height)
context.fillRect(200,200,50,100);
// arc(x, y, radius, angle, endangle)
context.fillStyle = "red";
context.arc(100, 150, 30, 2*Math.PI, false);
context.fill();
// triangle path
context.strokeStyle = "orange";
context.fillStyle = "orange";
context.beginPath();
context.moveTo(100,200);
context.lineTo(150,250);
context.stroke();
context.lineTo(50,250);
context.stroke();
context.lineTo(100,200);
context.stroke();
context.closePath();
context.fill();
// overlap
// context.globalCompositeOperation = "lighter";
//context.globalCompositeOperation = "destination-over";
// context.globalCompositeOperation = "xor";
context.beginPath();
context.fillStyle = "purple";
context.arc(300,100,40, 2*Math.PI, false);
context.fill();
context.closePath();
context.beginPath();
context.arc(340,100,40, 2*Math.PI, false);
context.fillStyle = "green";
context.fill();
// bezier curve
context.moveTo(50,50);
context.bezierCurveTo(100, 10, 80, 100, 150, 60);
context.stroke();
// text
context.textAlign = "center";
context.font = "40px Arial";
context.fillText("Hello World", 400, 400);
}
</script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>