Skip to content

Commit a68998a

Browse files
jaywcjlovejaywcjlove
committed
doc: add canvas scale/rotate/transform/translate/settransform/font document.
1 parent a4cfd97 commit a68998a

File tree

8 files changed

+470
-13
lines changed

8 files changed

+470
-13
lines changed

‎docs/assets/img_translate.gif‎

2.96 KB
Loading

‎docs/tags/canvas_font.md‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,68 @@
1-
HTML `<canvas>` 标签的 font 属性
2-
===
1+
HTML canvas font 属性
2+
===
3+
4+
## 示例
5+
6+
在画布上写一个 `30px` 高的文本，使用字体“Arial”：
7+
8+
```html idoc:preview:iframe
9+
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
10+
11+
<script>
12+
var c = document.getElementById("myCanvas");
13+
var ctx = c.getContext("2d");
14+
ctx.font = "30px Arial";
15+
ctx.fillText("Hello World", 10, 50);
16+
</script>
17+
```
18+
19+
JavaScript:
20+
21+
```js
22+
var c = document.getElementById("myCanvas");
23+
var ctx = c.getContext("2d");
24+
ctx.font = "30px Arial";
25+
ctx.fillText("Hello World", 10, 50);
26+
```
27+
28+
## 浏览器支持
29+
30+
表中的数字指定了完全支持该属性的第一个浏览器版本。
31+
32+
| 属性 Property | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
33+
| ------- | --- | --- | --- | --- | --- |
34+
| font | Yes | 9.0 | Yes | Yes | Yes |
35+
<!--rehype:style=width: 100%; display: inline-table;-->
36+
37+
## 定义和用法
38+
39+
`font` 属性设置或返回画布上文本内容的当前字体属性。
40+
41+
| 默认值: | `10px sans-serif` |
42+
| ----- | ----- |
43+
| JavaScript 语法: | *context*.font="italic small-caps bold 12px arial"; |
44+
<!--rehype:style=width: 100%; display: inline-table;-->
45+
46+
## 参数值
47+
48+
| 参数 | 描述 Description |
49+
| ----- | ----- |
50+
| *font-style* | 指定字体样式。 可能的值：<br>* `normal` <br>* `italic` <br>* `oblique` |
51+
| *font-variant* | 指定字体变体。 可能的值：<br>* `normal` <br>* `small-caps` |
52+
| *font-weight* | 指定字体粗细。 可能的值：<br>* `normal` <br>* `bold` <br>* `bolder` <br>* `lighter` <br>* `100` <br>* `200` <br>* `300` <br>* `400` <br>* `500` <br>* `600` <br>* `700` <br>* `800` <br>* `900` |
53+
| *font-size/line-height* | 指定字体大小和行高，以像素为单位 |
54+
| *font-family* | 指定字体系列 |
55+
| caption | 使用字体标题控件（如按钮、下拉菜单等） |
56+
| icon | 使用用于标记图标的字体 |
57+
| menu | 使用菜单中使用的字体（下拉菜单和菜单列表） |
58+
| message-box | 使用对话框中使用的字体 |
59+
| small-caption | 使用用于标记小控件的字体 |
60+
| status-bar | 使用窗口状态栏中使用的字体 |
61+
<!--rehype:style=width: 100%; display: inline-table;-->
62+
63+
64+
[1]: ../assets/chrome.svg
65+
[2]: ../assets/edge.svg
66+
[3]: ../assets/firefox.svg
67+
[4]: ../assets/safari.svg
68+
[5]: ../assets/opera.svg

‎docs/tags/canvas_quadraticcurveto.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ ctx.stroke();
4343

4444
二次贝塞尔曲线需要两个点。 第一个点是二次贝塞尔计算中使用的控制点，第二个点是曲线的终点。 曲线的起点是当前路径中的最后一个点。 如果路径不存在，则使用 [beginPath()](canvas_beginpath.md) 和 [moveTo()](canvas_moveto.md) 方法定义起点。
4545

46-
![A quadratic Bézier curve](../assets/img_quadraticcurve.gif)
46+
![二次贝塞尔曲线](../assets/img_quadraticcurve.gif)
4747

4848

4949
起点：<i></i><!--rehype:style=display: inline-block; background: #ff9000; width: 9px; height: 9px;-->

‎docs/tags/canvas_rotate.md‎

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,58 @@
1-
HTML `<canvas>` 标签的 rotate() 方法
2-
===
1+
HTML canvas rotate() 方法
2+
===
3+
4+
## 示例
5+
6+
将矩形旋转 `20` 度：
7+
8+
```html idoc:preview:iframe
9+
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
10+
<script>
11+
var c = document.getElementById("myCanvas");
12+
var ctx = c.getContext("2d");
13+
ctx.rotate(20 * Math.PI / 180);
14+
ctx.fillRect(50, 20, 100, 50);
15+
</script>
16+
```
17+
18+
JavaScript:
19+
20+
```js
21+
var c = document.getElementById("myCanvas");
22+
var ctx = c.getContext("2d");
23+
ctx.rotate(20 * Math.PI / 180);
24+
ctx.fillRect(50, 20, 100, 50);
25+
```
26+
27+
## 浏览器支持
28+
29+
表中的数字指定了完全支持该属性的第一个浏览器版本。
30+
31+
| 方法 Method | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
32+
| ------- | --- | --- | --- | --- | --- |
33+
| rotate() | Yes | 9.0 | Yes | Yes | Yes |
34+
<!--rehype:style=width: 100%; display: inline-table;-->
35+
36+
## 定义和用法
37+
38+
`rotate()` 方法旋转当前图形。
39+
40+
**注意：** 旋转只会影响旋转完成后制作的图纸。
41+
42+
| JavaScript 语法: | *context*.rotate(*angle*); |
43+
| ----- | ----- |
44+
<!--rehype:style=width: 100%; display: inline-table;-->
45+
46+
## 参数值
47+
48+
| 参数 | 描述 Description |
49+
| ----- | ----- |
50+
| *angle* | 旋转角度，以弧度为单位。 从度数到弧度的计算：*degrees*\*Math.PI/180。 示例：要旋转 5 度，请指定以下内容：5\*Math.PI/180 |
51+
<!--rehype:style=width: 100%; display: inline-table;-->
52+
53+
54+
[1]: ../assets/chrome.svg
55+
[2]: ../assets/edge.svg
56+
[3]: ../assets/firefox.svg
57+
[4]: ../assets/safari.svg
58+
[5]: ../assets/opera.svg

‎docs/tags/canvas_scale.md‎

Lines changed: 96 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,96 @@
1-
HTML `<canvas>` 标签的 scale() 方法
2-
===
1+
HTML canvas scale() 方法
2+
===
3+
4+
## 示例
5+
6+
绘制一个矩形，缩放到 200%，然后再次绘制矩形：
7+
8+
```html idoc:preview:iframe
9+
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
10+
11+
<script>
12+
var c = document.getElementById("myCanvas");
13+
var ctx = c.getContext("2d");
14+
15+
ctx.strokeRect(5, 5, 25, 15);
16+
ctx.scale(2, 2);
17+
ctx.strokeRect(5, 5, 25, 15);
18+
</script>
19+
```
20+
21+
JavaScript:
22+
23+
```js
24+
var c = document.getElementById("myCanvas");
25+
var ctx = c.getContext("2d");
26+
ctx.strokeRect(5, 5, 25, 15);
27+
ctx.scale(2, 2);
28+
ctx.strokeRect(5, 5, 25, 15);
29+
```
30+
31+
## 浏览器支持
32+
33+
表中的数字指定了完全支持该属性的第一个浏览器版本。
34+
35+
| 方法 Method | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
36+
| ------- | --- | --- | --- | --- | --- |
37+
| `scale()` | Yes | 9.0 | Yes | Yes | Yes |
38+
<!--rehype:style=width: 100%; display: inline-table;-->
39+
40+
## 定义和用法
41+
42+
`scale()` 方法缩放当前图形，更大或更小。
43+
44+
**注意：** 如果您缩放图纸，所有未来的图纸也将被缩放。 定位也将被缩放。 如果你缩放 `(2,2）`； 绘图将放置在您指定的距离画布左侧和顶部两倍的位置。
45+
46+
| JavaScript 语法: | *context*.scale(*scalewidth,scaleheight*); |
47+
| ----- | ----- |
48+
<!--rehype:style=width: 100%; display: inline-table;-->
49+
50+
## 参数值
51+
52+
| 参数 | 描述 Description |
53+
| ----- | ----- |
54+
| *scalewidth* | 缩放当前图形的宽度（1=100%、0.5=50%、2=200% 等） |
55+
| *scaleheight* | 缩放当前图形的高度（1=100%、0.5=50%、2=200% 等） |
56+
<!--rehype:style=width: 100%; display: inline-table;-->
57+
58+
## 更多示例
59+
60+
绘制一个矩形，缩放到 200%，再次绘制矩形，缩放到 200%，再次绘制矩形，缩放到 200%，再次绘制矩形：
61+
62+
```html idoc:preview:iframe
63+
<canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
64+
<script>
65+
var c = document.getElementById("myCanvas");
66+
var ctx = c.getContext("2d");
67+
ctx.strokeRect(5, 5, 25, 15);
68+
ctx.scale(2, 2);
69+
ctx.strokeRect(5, 5, 25, 15);
70+
ctx.scale(2, 2);
71+
ctx.strokeRect(5, 5, 25, 15);
72+
ctx.scale(2, 2);
73+
ctx.strokeRect(5, 5, 25, 15);
74+
</script>
75+
```
76+
77+
JavaScript:
78+
79+
```js
80+
var c = document.getElementById("myCanvas");
81+
var ctx = c.getContext("2d");
82+
ctx.strokeRect(5, 5, 25, 15);
83+
ctx.scale(2, 2);
84+
ctx.strokeRect(5, 5, 25, 15);
85+
ctx.scale(2, 2);
86+
ctx.strokeRect(5, 5, 25, 15);
87+
ctx.scale(2, 2);
88+
ctx.strokeRect(5, 5, 25, 15);
89+
```
90+
91+
92+
[1]: ../assets/chrome.svg
93+
[2]: ../assets/edge.svg
94+
[3]: ../assets/firefox.svg
95+
[4]: ../assets/safari.svg
96+
[5]: ../assets/opera.svg

‎docs/tags/canvas_settransform.md‎

Lines changed: 85 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,85 @@
1-
HTML `<canvas>` 标签的 setTransform() 方法
2-
===
1+
HTML canvas setTransform() 方法
2+
===
3+
4+
## 示例
5+
6+
绘制一个矩形，使用 `setTransform()` 重置并创建一个新的变换矩阵，再次绘制矩形，重置并创建一个新的变换矩阵，然后再次绘制矩形。 请注意，每次调用 `setTransform()` 时，它都会重置之前的变换矩阵，然后构建新矩阵，因此在下面的示例中，红色矩形没有显示，因为它位于蓝色矩形下方：
7+
8+
```html idoc:preview:iframe
9+
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
10+
11+
<script>
12+
var c = document.getElementById("myCanvas");
13+
var ctx = c.getContext("2d");
14+
15+
ctx.fillStyle = "yellow";
16+
ctx.fillRect(0, 0, 250, 100)
17+
18+
ctx.setTransform(1,0.5, -0.5, 1, 30, 10);
19+
ctx.fillStyle = "red";
20+
ctx.fillRect(0, 0, 250, 100);
21+
22+
ctx.setTransform(1,0.5, -0.5, 1, 30, 10);
23+
ctx.fillStyle = "blue";
24+
ctx.fillRect(0, 0, 250, 100);
25+
</script>
26+
```
27+
28+
JavaScript:
29+
30+
```js
31+
var c = document.getElementById("myCanvas");
32+
var ctx = c.getContext("2d");
33+
34+
ctx.fillStyle = "yellow";
35+
ctx.fillRect(0, 0, 250, 100)
36+
37+
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
38+
ctx.fillStyle = "red";
39+
ctx.fillRect(0, 0, 250, 100);
40+
41+
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
42+
ctx.fillStyle = "blue";
43+
ctx.fillRect(0, 0, 250, 100);
44+
```
45+
46+
## 浏览器支持
47+
48+
表中的数字指定了完全支持该属性的第一个浏览器版本。
49+
50+
| 方法 Method | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
51+
| ------- | --- | --- | --- | --- | --- |
52+
| setTransform() | Yes | 9.0 | Yes | Yes | Yes |
53+
<!--rehype:style=width: 100%; display: inline-table;-->
54+
55+
## 定义和用法
56+
57+
画布上的每个对象都有一个当前变换矩阵。
58+
59+
`setTransform()` 方法将当前变换重置为单位矩阵，然后使用相同的参数运行 [transform()](canvas_transform.md)。
60+
61+
换句话说，`setTransform()` 方法允许您缩放、旋转、移动和倾斜当前上下文。
62+
63+
**注意：** 转换只会影响调用 `setTransform` 方法后的绘图。
64+
65+
| JavaScript 语法: | *context*.setTransform(*a,b,c,d,e,f*); |
66+
| ----- | ----- |
67+
<!--rehype:style=width: 100%; display: inline-table;-->
68+
69+
## 参数值
70+
71+
| 参数 | 描述 Description |
72+
| ----- | ----- |
73+
| *a* | 水平缩放 |
74+
| *b* | 水平倾斜 |
75+
| *c* | 垂直倾斜 |
76+
| *d* | 垂直缩放 |
77+
| *e* | 水平移动 |
78+
| *f* | 垂直移动 |
79+
<!--rehype:style=width: 100%; display: inline-table;-->
80+
81+
[1]: ../assets/chrome.svg
82+
[2]: ../assets/edge.svg
83+
[3]: ../assets/firefox.svg
84+
[4]: ../assets/safari.svg
85+
[5]: ../assets/opera.svg

0 commit comments

Comments
 (0)