Skip to content

Commit ad2fd7b

Browse files
jaywcjlovejaywcjlove
committed
feat: add docs/canvas.md
1 parent 345e968 commit ad2fd7b

File tree

4 files changed

+257
-1
lines changed

4 files changed

+257
-1
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ Quick Reference
102102
[Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23);-->
103103
[ES 6](./docs/es6.md)<!--rehype:style=background: rgb(122 203 23);&class=tag&data-lang=JS-->
104104
[HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39);-->
105+
[HTML Canvas](./docs/canvas.md)<!--rehype:style=background: rgb(228 77 39);-->
105106
[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31);-->
106107
[jQuery](./docs/jquery.md)<!--rehype:style=background: rgb(203 183 31);-->
107108
[Next.js](./docs/nextjs.md)<!--rehype:style=background: rgb(0 0 0);&class=tag&data-lang=React-->

‎assets/canvas.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎docs/canvas.md‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
HTML Canvas 备忘清单
2+
===
3+
4+
这份 HTML Canvas 快速参考备忘单列出了常见的 HTML5 Canvas 设计标签，以易读的格式呈现。
5+
6+
入门
7+
---
8+
<!--rehype:body-class=cols-4-->
9+
10+
### 基本设置
11+
<!--rehype:wrap-class=col-span-2-->
12+
13+
```html
14+
<!DOCTYPE html>
15+
<html>
16+
<head>
17+
<title>Canvas 示例</title>
18+
</head>
19+
<body>
20+
<canvas id="myCanvas" width="500" height="400"
21+
style="border:1px solid #000000;">
22+
</canvas>
23+
<script src="script.js"></script>
24+
</body>
25+
</html>
26+
```
27+
28+
### 获取上下文
29+
<!--rehype:wrap-class=col-span-2-->
30+
31+
```js
32+
const canvas = document.getElementById("myCanvas");
33+
34+
const ctx = canvas.getContext("2d");
35+
```
36+
37+
绘制形状
38+
---
39+
40+
### 矩形
41+
<!--rehype:wrap-class=col-span-2-->
42+
43+
```js
44+
ctx.fillStyle = "red";
45+
ctx.fillRect(10, 10, 150, 100); // x, y, 宽度, 高度
46+
47+
ctx.strokeStyle = "blue";
48+
ctx.lineWidth = 5;
49+
ctx.strokeRect(200, 10, 150, 100); // x, y, 宽度, 高度
50+
51+
ctx.clearRect(15, 15, 30, 30); // x, y, 宽度, 高度
52+
```
53+
54+
路径
55+
---
56+
57+
### 线条
58+
59+
```js
60+
ctx.beginPath();
61+
ctx.moveTo(50, 50); // 起始点
62+
ctx.lineTo(200, 50); // 结束点
63+
ctx.lineTo(200, 200); // 下一个线条结束点
64+
ctx.closePath(); // 将结束点连接到起始点
65+
ctx.stroke();
66+
```
67+
68+
### 圆形
69+
70+
```js
71+
ctx.beginPath();
72+
// x, y, 半径, 起始角度, 结束角度
73+
ctx.arc(150, 150, 75, 0, 2 * Math.PI);
74+
ctx.fillStyle = "green";
75+
ctx.fill();
76+
ctx.stroke();
77+
```
78+
79+
### 弧
80+
81+
```js
82+
ctx.beginPath();
83+
// x, y, 半径, 起始角度, 结束角度
84+
ctx.arc(150, 150, 75, 0, Math.PI);
85+
ctx.stroke();
86+
```
87+
88+
贝塞尔曲线和二次曲线
89+
---
90+
91+
### 二次曲线
92+
93+
```js
94+
ctx.beginPath();
95+
ctx.moveTo(50, 250);
96+
// cpX, cpY, 终点X, 终点Y
97+
ctx.quadraticCurveTo(200, 100, 400, 250);
98+
ctx.stroke();
99+
```
100+
101+
### 贝塞尔曲线
102+
103+
```js
104+
ctx.beginPath();
105+
ctx.moveTo(50, 300);
106+
// cp1X, cp1Y, cp2X, cp2Y, 终点X, 终点Y
107+
ctx.bezierCurveTo(150, 100, 350, 500, 450, 300);
108+
ctx.stroke();
109+
```
110+
111+
### 文本
112+
113+
```js
114+
ctx.font = "30px Arial";
115+
ctx.fillStyle = "black";
116+
// 文本, x, y
117+
ctx.fillText("Hello Canvas", 10, 50);
118+
// 文本, x, y
119+
ctx.strokeText("Hello Canvas", 10, 100);
120+
```
121+
122+
### 图像
123+
<!--rehype:wrap-class=col-span-3-->
124+
125+
```js
126+
const img = new Image();
127+
img.src = "path/to/image.jpg";
128+
img.onload = () => {
129+
ctx.drawImage(img, 10, 10); // img, x, y
130+
ctx.drawImage(img, 50, 50, 100, 100); // img, x, y, 宽度, 高度
131+
ctx.drawImage(img, 100, 100, 100, 100, 150, 150, 200, 200); // img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight
132+
};
133+
```
134+
135+
变换
136+
---
137+
138+
### 平移
139+
140+
```js
141+
ctx.translate(100, 100); // x, y
142+
ctx.fillRect(0, 0, 50, 50);
143+
```
144+
145+
### 旋转
146+
147+
```js
148+
// 角度（以弧度为单位）
149+
ctx.rotate((Math.PI / 180) * 45);
150+
ctx.fillRect(100, 100, 50, 50);
151+
```
152+
153+
### 缩放
154+
155+
```js
156+
ctx.scale(2, 2); // x, y
157+
ctx.fillRect(50, 50, 50, 50);
158+
```
159+
160+
渐变
161+
---
162+
163+
### 线性渐变
164+
<!--rehype:wrap-class=col-span-2-->
165+
166+
```js
167+
const linearGradient = ctx.createLinearGradient(0, 0, 200, 0); // x0, y0, x1, y1
168+
linearGradient.addColorStop(0, "red");
169+
linearGradient.addColorStop(1, "blue");
170+
ctx.fillStyle = linearGradient;
171+
ctx.fillRect(10, 10, 200, 100);
172+
```
173+
174+
### 径向渐变
175+
176+
```js
177+
const radialGradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); // x0, y0, r0, x1, y1, r1
178+
radialGradient.addColorStop(0, "red");
179+
radialGradient.addColorStop(1, "blue");
180+
ctx.fillStyle = radialGradient;
181+
ctx.fillRect(10, 10, 200, 100);
182+
```
183+
184+
### 图案
185+
<!--rehype:wrap-class=col-span-2-->
186+
187+
```js
188+
const img = new Image();
189+
img.src = "path/to/image.jpg";
190+
img.onload = () => {
191+
// 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'
192+
const pattern = ctx.createPattern(img, "repeat");
193+
ctx.fillStyle = pattern;
194+
ctx.fillRect(0, 0, 300, 300);
195+
};
196+
```
197+
198+
### 阴影
199+
200+
```js
201+
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
202+
ctx.shadowBlur = 10;
203+
ctx.shadowOffsetX = 5;
204+
ctx.shadowOffsetY = 5;
205+
206+
ctx.fillStyle = "red";
207+
ctx.fillRect(100, 100, 100, 100);
208+
```
209+
210+
合成
211+
---
212+
213+
### 全局透明度
214+
215+
```js
216+
ctx.globalAlpha = 0.5;
217+
ctx.fillStyle = "red";
218+
ctx.fillRect(100, 100, 100, 100);
219+
220+
ctx.fillStyle = "blue";
221+
ctx.fillRect(150, 150, 100, 100);
222+
```
223+
224+
### 全局合成操作
225+
226+
```js
227+
ctx.globalCompositeOperation = "source-over"; // 默认
228+
ctx.fillStyle = "red";
229+
ctx.fillRect(100, 100, 100, 100);
230+
231+
ctx.globalCompositeOperation = "destination-over";
232+
ctx.fillStyle = "blue";
233+
ctx.fillRect(150, 150, 100, 100);
234+
```
235+
236+
### 动画
237+
238+
```js
239+
let x = 0;
240+
function draw() {
241+
ctx.clearRect(0, 0, canvas.width, canvas.height);
242+
ctx.fillStyle = "blue";
243+
ctx.fillRect(x, 100, 50, 50);
244+
x += 2;
245+
requestAnimationFrame(draw);
246+
}
247+
draw();
248+
```
249+
250+
参考阅读
251+
---
252+
253+
- [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)

‎docs/quickreference.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1018,7 +1018,7 @@ H2 部分 - 5列效果展示
10181018
...
10191019
```
10201020

1021-
[#示例](https://github.com/jaywcjlove/reference/blob/ee03850619440e3700ed68ccc2ed21d3591a1490/docs/quickreference.md?plain=1#L986-L991)<!--rehype:target=__blank-->
1021+
[#示例](https://github.com/jaywcjlove/reference/blob/8ae69f23860c1854a81aeceb81a6cc0bc0998fc4/docs/quickreference.md?plain=1#L1012-L1021)<!--rehype:target=__blank-->
10221022

10231023
### Two
10241024

0 commit comments

Comments
 (0)