Skip to content

Commit 8d89adb

Browse files
jaywcjlovejaywcjlove
committed
doc: add canvas filltext/stroketext/measuretext/drawimage document.
1 parent 9a27d38 commit 8d89adb

File tree

5 files changed

+436
-8
lines changed

5 files changed

+436
-8
lines changed

‎docs/assets/mov_bbb.mp4‎

770 KB
Binary file not shown.

‎docs/tags/canvas_drawimage.md‎

Lines changed: 197 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,197 @@
1-
HTML `<canvas>` 标签的 drawImage() 方法
2-
===
1+
HTML canvas drawImage() 方法
2+
===
3+
4+
## 示例
5+
6+
![The Scream](../assets/chrome.svg)
7+
8+
将图像绘制到画布上：
9+
10+
```html idoc:preview:iframe
11+
<div>要使用的图像：</div>
12+
<img id="scream" width="65" height="65" src="../assets/chrome.svg">
13+
<div>Canvas:</div>
14+
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。 </canvas>
15+
16+
<script>
17+
window.onload = function() {
18+
var c = document.getElementById("myCanvas");
19+
var ctx = c.getContext("2d");
20+
var img = document.getElementById("scream");
21+
ctx.drawImage(img, 10, 10);
22+
}
23+
</script>
24+
```
25+
26+
JavaScript:
27+
28+
```js
29+
window.onload = function() {
30+
var c = document.getElementById("myCanvas");
31+
var ctx = c.getContext("2d");
32+
var img = document.getElementById("scream");
33+
ctx.drawImage(img, 10, 10);
34+
};
35+
```
36+
37+
## 浏览器支持
38+
39+
表中的数字指定了完全支持该属性的第一个浏览器版本。
40+
41+
| 方法 Method | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
42+
| ------- | --- | --- | --- | --- | --- |
43+
| drawImage() | Yes | 9.0 | Yes | Yes | Yes |
44+
<!--rehype:style=width: 100%; display: inline-table;-->
45+
46+
## 定义和用法
47+
48+
`drawImage()` 方法在画布上绘制图像、画布或视频。
49+
50+
`drawImage()` 方法还可以绘制图像的一部分，和/或增加/减小图像大小。
51+
52+
**注意：** 您不能在图像加载之前调用 `drawImage()` 方法。 为确保图像已加载，您可以从 `window.onload()` 或 `document.getElementById("imageID").onload` 调用 `drawImage()`。
53+
54+
## JavaScript 语法
55+
56+
将图像放置在画布上：
57+
58+
| JavaScript 语法: | *context*.drawImage(*img,x,y*); |
59+
| ----- | ----- |
60+
<!--rehype:style=width: 100%; display: inline-table;-->
61+
62+
将图像放置在画布上，并指定图像的宽度和高度：
63+
64+
| JavaScript 语法: | *context*.drawImage(*img,x,y,width,height*); |
65+
| ----- | ----- |
66+
<!--rehype:style=width: 100%; display: inline-table;-->
67+
68+
裁剪图像并将裁剪的部分放置在画布上：
69+
70+
| JavaScript 语法: | *context*.drawImage(*img,sx,sy,swidth,sheight,x,y,width,height*); |
71+
| ----- | ----- |
72+
<!--rehype:style=width: 100%; display: inline-table;-->
73+
74+
## 参数值
75+
76+
| 参数 | 描述 Description |
77+
| ----- | ----- |
78+
| *img* | 指定要使用的图像、画布或视频元素 |
79+
| *sx* | 选修的。 开始剪辑的 x 坐标 |
80+
| *sy* | 选修的。 y 坐标从哪里开始剪辑 |
81+
| *swidth* | 选修的。 剪切图像的宽度 |
82+
| *sheight* | 选修的。 剪切图像的高度 |
83+
| *x* | 将图像放置在画布上的 x 坐标 |
84+
| *y* | y 坐标在画布上放置图像的位置 |
85+
| *width* | 选修的。 要使用的图像宽度（拉伸或缩小图像） |
86+
| *height* | 选修的。 要使用的图像高度（拉伸或缩小图像） |
87+
<!--rehype:style=width: 100%; display: inline-table;-->
88+
89+
## 更多示例
90+
91+
将图像放置在画布上，并指定图像的宽度和高度：
92+
93+
```html idoc:preview:iframe
94+
<div>要使用的图像：</div>
95+
<img id="scream" width="120" height="120" src="../assets/chrome.svg" alt="The Scream">
96+
97+
<div>Canvas:</div>
98+
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。 </canvas>
99+
100+
<script>
101+
window.onload = function() {
102+
var c = document.getElementById("myCanvas");
103+
var ctx = c.getContext("2d");
104+
var img = document.getElementById("scream");
105+
ctx.drawImage(img, 10, 10, 150, 180);
106+
}
107+
</script>
108+
```
109+
110+
JavaScript:
111+
112+
```js
113+
window.onload = function() {
114+
var c = document.getElementById("myCanvas");
115+
var ctx = c.getContext("2d");
116+
var img = document.getElementById("scream");
117+
ctx.drawImage(img, 10, 10, 150, 180);
118+
};
119+
```
120+
121+
裁剪图像并将裁剪的部分放置在画布上
122+
123+
```html idoc:preview:iframe
124+
<div>要使用的图像：</div>
125+
<img id="scream" src="../assets/workplace.jpg" alt="The Scream" width="120" height="120">
126+
127+
<div>Canvas:</div>
128+
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。 </canvas>
129+
130+
<script>
131+
window.onload = function() {
132+
var c = document.getElementById("myCanvas");
133+
var ctx = c.getContext("2d");
134+
var img = document.getElementById("scream");
135+
ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
136+
};
137+
</script>
138+
```
139+
140+
JavaScript:
141+
142+
```js
143+
window.onload = function() {
144+
var c = document.getElementById("myCanvas");
145+
var ctx = c.getContext("2d");
146+
var img = document.getElementById("scream");
147+
ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
148+
};
149+
```
150+
151+
要使用的视频（按播放开始演示）：
152+
153+
[](../assets/mov_bbb.mp4)
154+
155+
Canvas:
156+
157+
```html idoc:preview:iframe
158+
<p>使用视频：</p>
159+
<video id="video1" controls width="270" autoplay>
160+
<source src="../assets/mov_bbb.mp4" type='video/mp4'>
161+
</video>
162+
163+
<p>要使用的视频（按播放开始演示）：</p>
164+
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
165+
166+
<script>
167+
var v = document.getElementById("video1");
168+
var c = document.getElementById("myCanvas");
169+
var ctx = c.getContext("2d");
170+
var i;
171+
172+
v.addEventListener("play", function() {i = window.setInterval(function() {ctx.drawImage(v,5,5,260,125)},20);}, false);
173+
v.addEventListener("pause", function() {window.clearInterval(i);}, false);
174+
v.addEventListener("ended", function() {clearInterval(i);}, false);
175+
</script>
176+
```
177+
178+
JavaScript（代码每 20 毫秒绘制一次视频的当前帧）：
179+
180+
```js
181+
var v = document.getElementById("video1");
182+
var c = document.getElementById("myCanvas");
183+
var ctx = c.getContext('2d');
184+
var i;
185+
186+
v.addEventListener('play',function() {i=window.setInterval(function() {ctx.drawImage(v,5,5,260,125)},20);},false);
187+
v.addEventListener('pause',function() {window.clearInterval(i);},false);
188+
v.addEventListener('ended',function() {clearInterval(i);},false);
189+
```
190+
191+
192+
193+
[1]: ../assets/chrome.svg
194+
[2]: ../assets/edge.svg
195+
[3]: ../assets/firefox.svg
196+
[4]: ../assets/safari.svg
197+
[5]: ../assets/opera.svg

‎docs/tags/canvas_filltext.md‎

Lines changed: 85 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,85 @@
1-
HTML `<canvas>` 标签的 fillText() 方法
2-
===
1+
HTML canvas fillText() 方法
2+
===
3+
4+
## 示例
5+
6+
写“Hello world!” 和“Big smile!” （带渐变）在画布上，使用 `fillText()`：
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.font = "20px Georgia";
16+
ctx.fillText("Hello World!", 10, 50);
17+
18+
ctx.font = "30px Verdana";
19+
// 创建渐变
20+
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
21+
gradient.addColorStop("0", "magenta");
22+
gradient.addColorStop("0.5", "blue");
23+
gradient.addColorStop("1.0", "red");
24+
// 填充渐变
25+
ctx.fillStyle = gradient;
26+
ctx.fillText("Big smile!", 10, 90);
27+
</script>
28+
```
29+
30+
JavaScript:
31+
32+
```js
33+
var c = document.getElementById("myCanvas");
34+
var ctx = c.getContext("2d");
35+
36+
ctx.font = "20px Georgia";
37+
ctx.fillText("Hello World!", 10, 50);
38+
39+
ctx.font = "30px Verdana";
40+
// 创建渐变
41+
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
42+
gradient.addColorStop("0"," magenta");
43+
gradient.addColorStop("0.5", "blue");
44+
gradient.addColorStop("1.0", "red");
45+
// 填充渐变
46+
ctx.fillStyle = gradient;
47+
ctx.fillText("Big smile!", 10, 90);
48+
```
49+
50+
## 浏览器支持
51+
52+
表中的数字指定了完全支持该属性的第一个浏览器版本。
53+
54+
| 方法 Method | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
55+
| ------- | --- | --- | --- | --- | --- |
56+
| fillText() | Yes | 9.0 | Yes | Yes | Yes |
57+
<!--rehype:style=width: 100%; display: inline-table;-->
58+
59+
**注意：** Safari 5.1 及更早版本不支持 maxWidth 参数。
60+
61+
## 定义和用法
62+
63+
`fillText()` 方法在画布上绘制填充文本。 文本的默认颜色是黑色。
64+
65+
**提示：** 使用 [font](canvas_font.md) 属性指定字体和字体大小，并使用 [fillStyle](canvas_fillstyle.md) 属性以另一种颜色/渐变呈现文本。
66+
67+
| JavaScript 语法: | *context*.fillText(*text,x,y,maxWidth*); |
68+
| ----- | ----- |
69+
<!--rehype:style=width: 100%; display: inline-table;-->
70+
71+
## 参数值
72+
73+
| 参数 | 描述 Description |
74+
| ----- | ----- |
75+
| *text* | 指定将在画布上写入的文本 |
76+
| *x* | 开始绘制文本的 x 坐标（相对于画布） |
77+
| *y* | y 坐标开始绘制文本的位置（相对于画布） |
78+
| *maxWidth* | 选修的。 文本的最大允许宽度，以像素为单位 |
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

‎docs/tags/canvas_measuretext.md‎

Lines changed: 63 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,63 @@
1-
HTML `<canvas>` 标签的 measureText() 方法
2-
===
1+
HTML canvas measureText() 方法
2+
===
3+
4+
## 示例
5+
6+
在画布上写之前检查文本的宽度：
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+
var txt = "Hello World"
16+
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50);
17+
ctx.fillText(txt, 10, 100);
18+
</script>
19+
```
20+
21+
JavaScript:
22+
23+
```js
24+
var c = document.getElementById("myCanvas");
25+
var ctx = c.getContext("2d");
26+
ctx.font = "30px Arial";
27+
var txt = "Hello World"
28+
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50)
29+
ctx.fillText(txt, 10, 100);
30+
```
31+
32+
## 浏览器支持
33+
34+
表中的数字指定了完全支持该属性的第一个浏览器版本。
35+
36+
| 方法 Method | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
37+
| ------- | --- | --- | --- | --- | --- |
38+
| measureText() | Yes | 9.0 | Yes | Yes | Yes |
39+
<!--rehype:style=width: 100%; display: inline-table;-->
40+
41+
## 定义和用法
42+
43+
`measureText()` 方法返回一个对象，该对象包含指定文本的宽度（以像素为单位）。
44+
45+
**提示：** 如果您需要在将文本写入画布之前知道文本的宽度，请使用此方法。
46+
47+
| JavaScript 语法: | *context*.measureText(*text*).width; |
48+
| ----- | ----- |
49+
<!--rehype:style=width: 100%; display: inline-table;-->
50+
51+
## 参数值
52+
53+
| 参数 | 描述 Description |
54+
| ----- | ----- |
55+
| *text* | 要测量的文本 |
56+
<!--rehype:style=width: 100%; display: inline-table;-->
57+
58+
59+
[1]: ../assets/chrome.svg
60+
[2]: ../assets/edge.svg
61+
[3]: ../assets/firefox.svg
62+
[4]: ../assets/safari.svg
63+
[5]: ../assets/opera.svg

0 commit comments

Comments
 (0)