forked from gittig11/Wechat
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (134 loc) · 6.32 KB
/
index.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas绘图</title>
<style type="text/css" media="screen">
canvas {
border: medium double black;
margin: 4px;
}
</style>
</head>
<body>
<canvas id="canvas_1" width="500" height="200">
</canvas>
<canvas id="canvas_2" width="500" height="200">
</canvas>
<canvas id="canvas_3" width="500" height="200">
</canvas>
<canvas id="canvas_4" width="500" height="200">
</canvas>
<canvas id="canvas_5" width="500" height="200">
</canvas>
<canvas id="canvas_6" width="500" height="200">
</canvas>
</body>
<!--————————————————————————————————————————————————————————————————————————————
获取画布上下文
成员 说明 返回
height 对应于height属性 数值
width 对应于height属性 数值
getContext() 为画布返回绘图上下文 对象
————————————————————————————————————————————————————————————————————————————-->
<script>
var ctx1 = document.getElementById('canvas_1').getContext('2d');
ctx1.fillRect(10, 10, 50, 50);
</script>
<!--————————————————————————————————————————————————————————————————————————————
绘制矩形
成员 说明 返回
clearRect(x,y,w,h) 清除指定的矩形 void
fillRect(x,y,w,h) 绘制一个实心矩形 void
strokeRect(x,y,w,h) 绘制一个空心矩形 void
—————————————————————————————————————————————————————————————————————————-->
<script>
var ctx2 = document.getElementById('canvas_2').getContext('2d'),
offset = 10,
size = 50,
count = 5;
for (var i = 0; i < count; i++) {
ctx2.fillRect(offset * i + size * (i - 1), offset, size, size);
ctx2.strokeRect(offset * i + size * (i - 1), 2 * offset + size, size, size);
ctx2.fillRect(offset * i + size * (i - 1), 3 * offset + 2 * size, size, size);
ctx2.clearRect(offset * i + size * (i - 1), 4 * offset + 2 * size, size, size - 10);
}
</script>
<!--————————————————————————————————————————————————————————————————————————————
绘制矩形
成员 说明 默认值
fillStyle 获取或设置用于实心图形的样式 black
lineJoin 获取或设置线条与图形连接时的样式 miter
lineWidth 获取或设置线条的宽度 1.0
strokeStyle 获取或设置用于线条的样式 black
————————————————————————————————————————————————————————————————————————————-->
<script>
var ctx3 = document.getElementById('canvas_3').getContext('2d');
ctx3.lineWidth = 2;
ctx3.strokeRect(10, 10, 50, 50);
ctx3.lineWidth = 4;
ctx3.strokeRect(70, 10, 50, 50);
ctx3.lineWidth = 6;
ctx3.strokeRect(130, 10, 50, 50);
ctx3.strokeRect(190, 10, 50, 50);
ctx3.lineWidth = 6;
ctx3.lineJoin = 'round';
ctx3.strokeRect(10, 70, 50, 50);
ctx3.lineJoin = 'bevel';
ctx3.strokeRect(70, 70, 50, 50);
ctx3.lineJoin = 'miter';
ctx3.strokeRect(130, 70, 50, 50);
var fillColors = ['red', 'blue'],
strokeColors = ['rgb(255,0,0)', 'rgb(0,255,20)'];
for (var i = 0; i < 2; i++) {
ctx3.strokeStyle = strokeColors[i];
ctx3.strokeRect(60 * i + 10, 130, 50, 50);
ctx3.fillStyle = fillColors[i];
ctx3.fillRect(60 * (i + 2) + 10, 130, 50, 50);
}
</script>
<!--————————————————————————————————————————————————————————————————————————————————————
使用渐变
成员 说明 返回
createLinearGradient(x0,y0,x1,y1) 创建线性渐变 CanvasGradient
createRadialGradient(x0,y0,r0,x1,y1.r1) 创建圆形渐变 CanvasGradient
CanvasGradient方法
成员 说明 返回
addColorStop(<position>,<color>) 给渐变的梯度线添加一种纯色 void
————————————————————————————————————————————————————————————————————————————————————-->
<script>
var ctx4 = document.getElementById('canvas_4').getContext('2d');
// 设置梯度线，开始于坐标(10,10)，结束于(60,60)
var gradRect = ctx4.createLinearGradient(10, 10, 60, 60);
gradRect.addColorStop(0, 'red');
gradRect.addColorStop(0.5, 'white');
gradRect.addColorStop(1, 'black');
ctx4.fillStyle = gradRect;
ctx4.fillRect(10, 10, 50, 50);
</script>
<script>
var ctx5 = document.getElementById('canvas_5').getContext('2d');
// 参数：起点圆的圆心坐标、起点圆的半径
// 终点圆的圆心坐标、终点圆的半径
var gradRadius = ctx5.createRadialGradient(250, 70, 20, 200, 60, 100);
gradRadius.addColorStop(0, 'red');
gradRadius.addColorStop(0.5, 'white');
gradRadius.addColorStop(1, 'black');
ctx5.fillStyle = gradRadius;
ctx5.fillRect(0, 0, 500, 140);
</script>
<script>
var ctx6 = document.getElementById('canvas_6').getContext('2d');
// 参数：起点圆的圆心坐标、起点圆的半径
// 终点圆的圆心坐标、终点圆的半径
var gradRadius = ctx6.createRadialGradient(250, 70, 20, 200, 60, 100);
gradRadius.addColorStop(0, 'red');
gradRadius.addColorStop(0.5, 'white');
gradRadius.addColorStop(1, 'black');
ctx6.fillStyle = gradRadius;
ctx6.fillRect(150, 20, 75, 50);
ctx6.lineWidth = 8;
ctx6.strokeStyle = gradRadius;
ctx6.strokeRect(250, 20, 75, 50);
</script>
</html>