Skip to content

Commit f97da71

Browse files
author
ailun
committed
demo
1 parent 59616ca commit f97da71

File tree

3 files changed

+155
-124
lines changed

3 files changed

+155
-124
lines changed

‎canvas/index.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@
88
<body>
99

1010
<canvas id="canvas" width="800" height="500"></canvas>
11-
<!-- <script src="canvas_1/js/index-1.js" type="text/javascript"></script> -->
12-
<script src="js/index-4.js" type="text/javascript"></script>
11+
<script src="js/index-1.js" type="text/javascript"></script>
12+
<!-- <script src="js/index-2.js" type="text/javascript"></script> -->
13+
1314

1415
</body>
1516
</html>

‎canvas/js/index-1.js

+66-122
Original file line numberDiff line numberDiff line change
@@ -1,196 +1,140 @@
11
draw();
2+
draw1();
3+
draw2();
4+
draw3();
5+
draw4();
6+
draw5();
7+
28

39
//矩形
410
function draw() {
511
var canvas = document.getElementById('canvas');
612
if (canvas.getContext) {
713
var ctx = canvas.getContext('2d');
814

15+
//fillRect(x, y, width, height)
16+
//绘制一个填充的矩形
917
ctx.fillRect(25, 25, 100, 100);
18+
//清除指定矩形区域，让清除部分完全透明
1019
ctx.clearRect(45, 45, 60, 60);
20+
//绘制一个矩形的边框
1121
ctx.strokeRect(50, 50, 50, 50);
1222
}
1323
}
1424

1525
//三角形
16-
function draw() {
26+
function draw1() {
1727
var canvas = document.getElementById('canvas');
1828
if (canvas.getContext) {
1929
var ctx = canvas.getContext('2d');
2030

31+
//新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
2132
ctx.beginPath();
22-
ctx.moveTo(75, 50);
23-
ctx.lineTo(100, 75);
24-
ctx.lineTo(100, 25);
33+
//将笔触移动到指定的坐标x以及y上
34+
ctx.moveTo(175, 75);
35+
//绘制一条从当前位置到指定x以及y位置的直线
36+
ctx.lineTo(225, 25);
37+
ctx.lineTo(225, 125);
38+
//通过填充路径的内容区域生成实心的图形
2539
ctx.fill();
2640
}
2741
}
2842

2943

3044
//笑脸
31-
function draw() {
45+
function draw2() {
3246
var canvas = document.getElementById('canvas');
3347
if (canvas.getContext) {
3448
var ctx = canvas.getContext('2d');
3549

3650
ctx.beginPath();
37-
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
38-
ctx.moveTo(110, 75);
39-
ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
40-
ctx.moveTo(65, 65);
41-
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
42-
ctx.moveTo(95, 65);
43-
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
51+
//画一个以（x,y）为圆心的以radius为半径的圆弧（圆），
52+
//从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成
53+
ctx.arc(325, 75, 50, 0, Math.PI * 2, true); // 绘制
54+
ctx.moveTo(290, 75);
55+
ctx.arc(325, 75, 35, 0, Math.PI, false); // 口(顺时针)
56+
ctx.moveTo(300, 65);
57+
ctx.arc(295, 65, 5, 0, Math.PI * 2, true); // 左眼
58+
ctx.moveTo(360, 65);
59+
ctx.arc(355, 65, 5, 0, Math.PI * 2, true); // 右眼
60+
//通过线条来绘制图形轮廓
4461
ctx.stroke();
4562
}
4663
}
4764

4865
//三角形
4966

50-
function draw() {
67+
function draw3() {
5168
var canvas = document.getElementById('canvas');
5269
if (canvas.getContext) {
5370
var ctx = canvas.getContext('2d');
5471

5572
// 填充三角形
5673
ctx.beginPath();
57-
ctx.moveTo(25, 25);
58-
ctx.lineTo(105, 25);
59-
ctx.lineTo(25, 105);
74+
ctx.moveTo(425, 25);
75+
ctx.lineTo(505, 25);
76+
ctx.lineTo(425, 105);
6077
ctx.fill();
6178

6279
// 描边三角形
6380
ctx.beginPath();
64-
ctx.moveTo(125, 125);
65-
ctx.lineTo(125, 45);
66-
ctx.lineTo(45, 125);
81+
ctx.moveTo(525, 125);
82+
ctx.lineTo(525, 45);
83+
ctx.lineTo(445, 125);
84+
//闭合路径之后图形绘制命令又重新指向到上下文中
6785
ctx.closePath();
6886
ctx.stroke();
6987
}
7088
}
7189

7290

7391
//二次贝塞尔曲线
74-
function draw() {
92+
function draw4() {
7593
var canvas = document.getElementById('canvas');
7694
if (canvas.getContext) {
7795
var ctx = canvas.getContext('2d');
7896

7997
// 二次贝塞尔曲线
8098
ctx.beginPath();
81-
ctx.moveTo(75, 25);
82-
ctx.quadraticCurveTo(25, 25, 25, 62.5);
83-
ctx.quadraticCurveTo(25, 100, 50, 100);
84-
ctx.quadraticCurveTo(50, 120, 30, 125);
85-
ctx.quadraticCurveTo(60, 120, 65, 100);
86-
ctx.quadraticCurveTo(125, 100, 125, 62.5);
87-
ctx.quadraticCurveTo(125, 25, 75, 25);
99+
ctx.moveTo(675, 25);
100+
//绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
101+
ctx.quadraticCurveTo(625, 25, 625, 62.5);
102+
ctx.quadraticCurveTo(625, 100, 650, 100);
103+
ctx.quadraticCurveTo(650, 120, 630, 125);
104+
ctx.quadraticCurveTo(660, 120, 665, 100);
105+
ctx.quadraticCurveTo(725, 100, 725, 62.5);
106+
ctx.quadraticCurveTo(725, 25, 675, 25);
88107
ctx.stroke();
89108
}
90109
}
91110

92111

93112
//三次贝塞尔曲线
94-
function draw() {
113+
function draw5() {
95114
var canvas = document.getElementById('canvas');
96115
if (canvas.getContext) {
97116
var ctx = canvas.getContext('2d');
98117

99-
//三次贝塞尔曲线
100-
ctx.beginPath();
101-
ctx.moveTo(75, 40);
102-
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
103-
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
104-
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
105-
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
106-
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
107-
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
108-
ctx.fill();
109-
}
110-
}
111-
112-
113-
//组合
114-
function draw() {
115-
var canvas = document.getElementById('canvas');
116-
if (canvas.getContext) {
117-
var ctx = canvas.getContext('2d');
118-
119-
roundedRect(ctx, 12, 12, 150, 150, 15);
120-
roundedRect(ctx, 19, 19, 150, 150, 9);
121-
roundedRect(ctx, 53, 53, 49, 33, 10);
122-
roundedRect(ctx, 53, 119, 49, 16, 6);
123-
roundedRect(ctx, 135, 53, 49, 33, 10);
124-
roundedRect(ctx, 135, 119, 25, 49, 10);
125-
126-
ctx.beginPath();
127-
ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
128-
ctx.lineTo(31, 37);
129-
ctx.fill();
130-
131-
for (var i = 0; i < 8; i++) {
132-
ctx.fillRect(51 + i * 16, 35, 4, 4);
133-
}
134-
135-
for (i = 0; i < 6; i++) {
136-
ctx.fillRect(115, 51 + i * 16, 4, 4);
137-
}
138-
139-
for (i = 0; i < 8; i++) {
140-
ctx.fillRect(51 + i * 16, 99, 4, 4);
141-
}
142-
143-
ctx.beginPath();
144-
ctx.moveTo(83, 116);
145-
ctx.lineTo(83, 102);
146-
ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
147-
ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
148-
ctx.lineTo(111, 116);
149-
ctx.lineTo(106.333, 111.333);
150-
ctx.lineTo(101.666, 116);
151-
ctx.lineTo(97, 111.333);
152-
ctx.lineTo(92.333, 116);
153-
ctx.lineTo(87.666, 111.333);
154-
ctx.lineTo(83, 116);
155-
ctx.fill();
156-
157-
ctx.fillStyle = "white";
158-
ctx.beginPath();
159-
ctx.moveTo(91, 96);
160-
ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
161-
ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
162-
ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
163-
ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
164-
ctx.moveTo(103, 96);
165-
ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
166-
ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
167-
ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
168-
ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
169-
ctx.fill();
170-
171-
ctx.fillStyle = "black";
172-
ctx.beginPath();
173-
ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
174-
ctx.fill();
118+
//三次贝塞尔曲线
119+
// ctx.beginPath();
120+
// ctx.moveTo(75, 40);
121+
// ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
122+
// ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
123+
// ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
124+
// ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
125+
// ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
126+
// ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
175127

128+
//三次贝塞尔曲线
176129
ctx.beginPath();
177-
ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
130+
ctx.moveTo(800, 40);
131+
//绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点
132+
ctx.bezierCurveTo(800, 37, 795, 25, 775, 25);
133+
ctx.bezierCurveTo(755, 25, 745, 62.5, 725, 62.5);
134+
// ctx.bezierCurveTo(745, 80, 765, 102, 800, 120);
135+
// ctx.bezierCurveTo(835, 102, 855, 80, 855, 62.5);
136+
// ctx.bezierCurveTo(855, 62.5, 855, 25, 825, 25);
137+
// ctx.bezierCurveTo(810, 25, 800, 37, 800, 40);
178138
ctx.fill();
179139
}
180-
}
181-
182-
// 封装的一个用于绘制圆角矩形的函数.
183-
184-
function roundedRect(ctx, x, y, width, height, radius) {
185-
ctx.beginPath();
186-
ctx.moveTo(x, y + radius);
187-
ctx.lineTo(x, y + height - radius);
188-
ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
189-
ctx.lineTo(x + width - radius, y + height);
190-
ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
191-
ctx.lineTo(x + width, y + radius);
192-
ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
193-
ctx.lineTo(x + radius, y);
194-
ctx.quadraticCurveTo(x, y, x, y + radius);
195-
ctx.stroke();
196-
}
140+
}

‎canvas/js/index-2.js

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
draw();
2+
3+
//组合
4+
function draw() {
5+
var canvas = document.getElementById('canvas');
6+
if (canvas.getContext) {
7+
var ctx = canvas.getContext('2d');
8+
9+
roundedRect(ctx, 12, 12, 150, 150, 15);
10+
roundedRect(ctx, 19, 19, 150, 150, 9);
11+
roundedRect(ctx, 53, 53, 49, 33, 10);
12+
roundedRect(ctx, 53, 119, 49, 16, 6);
13+
roundedRect(ctx, 135, 53, 49, 33, 10);
14+
roundedRect(ctx, 135, 119, 25, 49, 10);
15+
16+
ctx.beginPath();
17+
ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
18+
ctx.lineTo(31, 37);
19+
ctx.fill();
20+
21+
for (var i = 0; i < 8; i++) {
22+
ctx.fillRect(51 + i * 16, 35, 4, 4);
23+
}
24+
25+
for (i = 0; i < 6; i++) {
26+
ctx.fillRect(115, 51 + i * 16, 4, 4);
27+
}
28+
29+
for (i = 0; i < 8; i++) {
30+
ctx.fillRect(51 + i * 16, 99, 4, 4);
31+
}
32+
33+
ctx.beginPath();
34+
ctx.moveTo(83, 116);
35+
ctx.lineTo(83, 102);
36+
ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
37+
ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
38+
ctx.lineTo(111, 116);
39+
ctx.lineTo(106.333, 111.333);
40+
ctx.lineTo(101.666, 116);
41+
ctx.lineTo(97, 111.333);
42+
ctx.lineTo(92.333, 116);
43+
ctx.lineTo(87.666, 111.333);
44+
ctx.lineTo(83, 116);
45+
ctx.fill();
46+
47+
ctx.fillStyle = "white";
48+
ctx.beginPath();
49+
ctx.moveTo(91, 96);
50+
ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
51+
ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
52+
ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
53+
ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
54+
ctx.moveTo(103, 96);
55+
ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
56+
ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
57+
ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
58+
ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
59+
ctx.fill();
60+
61+
ctx.fillStyle = "black";
62+
ctx.beginPath();
63+
ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
64+
ctx.fill();
65+
66+
ctx.beginPath();
67+
ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
68+
ctx.fill();
69+
}
70+
}
71+
72+
// 封装的一个用于绘制圆角矩形的函数.
73+
74+
function roundedRect(ctx, x, y, width, height, radius) {
75+
ctx.beginPath();
76+
ctx.moveTo(x, y + radius);
77+
ctx.lineTo(x, y + height - radius);
78+
ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
79+
ctx.lineTo(x + width - radius, y + height);
80+
ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
81+
ctx.lineTo(x + width, y + radius);
82+
ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
83+
ctx.lineTo(x + radius, y);
84+
ctx.quadraticCurveTo(x, y, x, y + radius);
85+
ctx.stroke();
86+
}

0 commit comments

Comments
 (0)