-
Notifications
You must be signed in to change notification settings - Fork 0
/
test02.html
86 lines (76 loc) · 2.65 KB
/
test02.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>八卦图</title>
<!--下面excanvas.js需下载才能在IE下支持canvas-->
<!--[if IE]>
<script src="http://a.tbcdn.cn/p/fp/2011a/html5.js"></script>
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
<script src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
window.onload = function () {
let ctx = document.getElementById("pic").getContext('2d');
//绘制白色半圆
ctx.beginPath();
ctx.arc(200, 200, 80, 1.5 * Math.PI, Math.PI / 2, false);
ctx.fillStyle = "white";
// closePath:将路径闭合
ctx.closePath();
ctx.fill();
//绘制黑色半圆
ctx.beginPath();
ctx.arc(200, 200, 80, Math.PI / 2, 1.5 * Math.PI, false);
ctx.fillStyle = "black";
ctx.closePath();
ctx.fill();
//绘制黑色小圆
ctx.beginPath();
ctx.arc(200, 240, 40, 0, Math.PI * 2, true);
ctx.fillStyle = "black";
ctx.closePath();
ctx.fill();
//绘制白色小圆
ctx.beginPath();
ctx.arc(200, 160, 40, 0, Math.PI * 2, true);
ctx.fillStyle = "white";
ctx.closePath();
ctx.fill();
//绘制白色小圆心
ctx.beginPath();
ctx.arc(200, 160, 5, 0, Math.PI * 2, true);
ctx.fillStyle = "black";
ctx.closePath();
ctx.fill();
//绘制黑色小圆心
ctx.beginPath();
ctx.arc(200, 240, 5, 0, Math.PI * 2, true);
ctx.fillStyle = "white";
ctx.closePath();
ctx.fill();
//绘制文字
ctx.save();
ctx.fillStyle = "black";
ctx.globalAlpha = 0.4;
ctx.textAlign = "center";
ctx.font = "32px Arial";
// 设置阴影
// 阴影颜色
ctx.shadowColor = "rgba(0,0,0,0.4)";
// 阴影的横向位移量,默认为0
ctx.shadowOffsetX = 15;
// 阴影的纵向位移量,默认为0
ctx.shadowOffsetY = -10;
// 阴影模糊范围(可选),属性值是比0大的数字,否则将被忽略
ctx.shadowBlur = 2;
//IE不支持
ctx.fillText('Hello Canavs', 200, 100);
ctx.restore();
}
</script>
</head>
<body>
<canvas id="pic" width="400" height="400" style="border:1px solid; background:#E1E1FF;"></canvas>
</body>
</html>