Skip to content

Commit 69bf0d5

Browse files
jaywcjlovejaywcjlove
committed
doc: add canvas putimagedata/globalalpha/globalcompositeoperation document.
1 parent abbb9c8 commit 69bf0d5

File tree

3 files changed

+284
-6
lines changed

3 files changed

+284
-6
lines changed

‎docs/tags/canvas_globalalpha.md‎

Lines changed: 73 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,73 @@
1-
HTML `<canvas>` 标签的 globalAlpha 属性
2-
===
1+
HTML canvas globalAlpha 属性
2+
===
3+
4+
## 示例
5+
6+
首先，绘制一个红色矩形，然后设置透明度（globalAlpha）为0.5，然后绘制一个蓝色和一个绿色矩形：
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.fillStyle = "red";
14+
ctx.fillRect(20, 20, 75, 50);
15+
16+
// 打开透明度
17+
ctx.globalAlpha = 0.2;
18+
ctx.fillStyle = "blue";
19+
ctx.fillRect(50, 50, 75, 50);
20+
ctx.fillStyle = "green";
21+
ctx.fillRect(80, 80, 75, 50);
22+
</script>
23+
```
24+
25+
JavaScript:
26+
27+
```js
28+
var c = document.getElementById("myCanvas");
29+
var ctx = c.getContext("2d");
30+
ctx.fillStyle = "red";
31+
ctx.fillRect(20, 20, 75, 50);
32+
33+
// 打开透明度
34+
ctx.globalAlpha = 0.2;
35+
ctx.fillStyle = "blue";
36+
ctx.fillRect(50, 50, 75, 50);
37+
ctx.fillStyle = "green";
38+
ctx.fillRect(80, 80, 75, 50);
39+
```
40+
41+
## 浏览器支持
42+
43+
表中的数字指定了完全支持该属性的第一个浏览器版本。
44+
45+
| globalAlpha | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
46+
| ---- | ---- | ---- | ---- | ---- | ---- |
47+
| font | Yes | 9.0 | Yes | Yes | Yes |
48+
<!--rehype:style=width: 100%; display: inline-table;-->
49+
50+
## 定义和用法
51+
52+
`globalAlpha` 属性设置或返回绘图的当前 `alpha` 或透明度值。
53+
54+
`globalAlpha` 属性值必须是介于 `0.0`（完全透明）和 `1.0`（不透明）之间的数字。
55+
56+
| 默认值: | `1.0` |
57+
| ----- | ----- |
58+
| JavaScript 语法: | *context*.globalAlpha=*number*; |
59+
<!--rehype:style=width: 100%; display: inline-table;-->
60+
61+
## 属性值
62+
63+
| 值 Value | 描述 Description |
64+
| ------ | ------ |
65+
| *number* | 透明度值。 必须是介于 0.0（完全透明）和 1.0（不透明）之间的数字 |
66+
<!--rehype:style=width: 100%; display: inline-table;-->
67+
68+
69+
[1]: ../assets/chrome.svg
70+
[2]: ../assets/edge.svg
71+
[3]: ../assets/firefox.svg
72+
[4]: ../assets/safari.svg
73+
[5]: ../assets/opera.svg

‎docs/tags/canvas_globalcompositeoperation.md‎

Lines changed: 132 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,132 @@
1-
HTML `<canvas>` 标签的 globalCompositeOperation 属性
2-
===
1+
HTML canvas globalCompositeOperation 属性
2+
===
3+
4+
## 示例
5+
6+
使用两个不同的 `globalCompositeOperation` 值绘制矩形。 红色矩形是目标图像。 蓝色矩形是源图像：
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.fillStyle = "red";
15+
ctx.fillRect(20, 20, 75, 50);
16+
ctx.fillStyle = "blue";
17+
ctx.globalCompositeOperation = "source-over";
18+
ctx.fillRect(50, 50, 75, 50);
19+
ctx.fillStyle = "red";
20+
ctx.fillRect(150, 20, 75, 50);
21+
ctx.fillStyle = "blue";
22+
ctx.globalCompositeOperation = "destination-over";
23+
ctx.fillRect(180, 50, 75, 50);
24+
</script>
25+
```
26+
27+
JavaScript:
28+
29+
```js
30+
var c = document.getElementById("myCanvas");
31+
var ctx = c.getContext("2d");
32+
33+
ctx.fillStyle = "red";
34+
ctx.fillRect(20, 20, 75, 50);
35+
ctx.globalCompositeOperation = "source-over";
36+
ctx.fillStyle = "blue";
37+
ctx.fillRect(50, 50, 75, 50);
38+
39+
ctx.fillStyle = "red";
40+
ctx.fillRect(150, 20, 75, 50);
41+
ctx.globalCompositeOperation = "destination-over";
42+
ctx.fillStyle = "blue";
43+
ctx.fillRect(180, 50, 75, 50);
44+
```
45+
46+
## 浏览器支持
47+
48+
![chrome][1] ![edge][2] ![firefox][3] ![safari][4] ![opera][5]
49+
50+
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 globalCompositeOperation 属性。
51+
52+
## 定义和用法
53+
54+
`globalCompositeOperation` 属性设置或返回如何将源（新）图像绘制到目标（现有）图像上。
55+
56+
*源图像 =* 您将要放置到画布上的绘图。
57+
58+
*目标图像 =* 已经放置在画布上的绘图。
59+
60+
| 默认值: | `source-over` |
61+
| ------ | ------ |
62+
| JavaScript syntax: | *context*.globalCompositeOperation="source-in"; |
63+
64+
## 属性值
65+
66+
| 值 Value | 描述 Description |
67+
| ------ | ------ |
68+
| source-over | 默认。在 **目标图像** 上显示 **源图像** |
69+
| source-atop | 在 **目标图像** 顶部显示 **源图像**。 **目标图像**之外的**源图像**部分未显示 |
70+
| source-in | 将 **源图像** 显示到 **目标图像**。仅显示**目标图像**内部的**源图像**部分，并且**目标图像**是透明的 |
71+
| source-out | 显示**目标图像**之外的**源图像**。仅显示**目标图像**之外的**源图像**部分，并且**目标图像**是透明的 |
72+
| destination-over | 在**源图像**上显示**目标图像** |
73+
| destination-atop | 在**源图像**之上显示**目标图像**。未显示 **源图像** 之外的 **目标图像** 部分 |
74+
| destination-in | 在**源图像**中显示**目标图像**。仅显示**源图像**内部的**目标图像**部分，并且**源图像**是透明的 |
75+
| destination-out | 显示**源图像**中的**目标图像**。仅显示 **目标图像** 在 **源图像** 之外的部分，并且 **源图像** 是透明的 |
76+
| lighter | 显示**源图像**+**目标图像** |
77+
| copy | 显示**源图像**。**目标图像**被忽略 |
78+
| xor | **源图像**与**目标图像**使用异或组合 |
79+
80+
81+
82+
## 更多示例
83+
84+
所有 globalCompositeOperation 属性值：
85+
86+
```html idoc:preview:iframe
87+
<style>
88+
canvas {
89+
border: 1px solid #d3d3d3;
90+
margin-right: 10px;
91+
margin-bottom: 20px;
92+
}
93+
</style>
94+
<script>
95+
var gco = new Array();
96+
gco.push("source-atop");
97+
gco.push("source-in");
98+
gco.push("source-out");
99+
gco.push("source-over");
100+
gco.push("destination-atop");
101+
gco.push("destination-in");
102+
gco.push("destination-out");
103+
gco.push("destination-over");
104+
gco.push("lighter");
105+
gco.push("copy");
106+
gco.push("xor");
107+
108+
var n;
109+
for (n = 0; n < gco.length; n++) {
110+
document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");
111+
var c = document.createElement("canvas");
112+
c.width = 120;
113+
c.height = 100;
114+
document.getElementById("p_" + n).appendChild(c);
115+
var ctx = c.getContext("2d");
116+
ctx.fillStyle = "blue";
117+
ctx.fillRect(10, 10, 50, 50);
118+
ctx.globalCompositeOperation = gco[n];
119+
ctx.beginPath();
120+
ctx.fillStyle = "red";
121+
ctx.arc(50, 50, 30, 0, 2 * Math.PI);
122+
ctx.fill();
123+
document.write("</div>");
124+
}
125+
</script>
126+
```
127+
128+
[1]: ../assets/chrome.svg
129+
[2]: ../assets/edge.svg
130+
[3]: ../assets/firefox.svg
131+
[4]: ../assets/safari.svg
132+
[5]: ../assets/opera.svg

‎docs/tags/canvas_putimagedata.md‎

Lines changed: 79 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,79 @@
1-
HTML `<canvas>` 标签的 putImageData() 方法
2-
===
1+
HTML canvas putImageData() 方法
2+
===
3+
4+
## 示例
5+
6+
下面的代码使用 [`getImageData()`](./canvas_getimagedata.md) 复制画布上指定矩形的像素数据，然后使用 `putImageData()` 将图像数据放回画布上：
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.fillStyle = "red";
15+
ctx.fillRect(10, 10, 50, 50);
16+
17+
function copy() {
18+
var imgData = ctx.getImageData(10, 10, 50, 50);
19+
ctx.putImageData(imgData, 10, 70);
20+
}
21+
</script>
22+
<button onclick="copy()">Copy</button>
23+
```
24+
25+
JavaScript:
26+
27+
```js
28+
var c = document.getElementById("myCanvas");
29+
var ctx = c.getContext("2d");
30+
ctx.fillStyle = "red";
31+
ctx.fillRect(10, 10, 50, 50);
32+
33+
function copy() {
34+
var imgData = ctx.getImageData(10, 10, 50, 50);
35+
ctx.putImageData(imgData, 10, 70);
36+
}
37+
```
38+
39+
## 浏览器支持
40+
41+
表中的数字指定了完全支持该属性的第一个浏览器版本。
42+
43+
| 方法 Method | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
44+
| ------- | --- | --- | --- | --- | --- |
45+
| putImageData() | Yes | 9.0 | Yes | Yes | Yes |
46+
<!--rehype:style=width: 100%; display: inline-table;-->
47+
48+
## 定义和用法
49+
50+
`putImageData()` 方法将图像数据（来自指定的 `ImageData` 对象）放回画布上。
51+
52+
**提示：** 了解 [getImageData()](canvas_getimagedata.md) 方法，该方法复制画布上指定矩形的像素数据。
53+
54+
**提示：** 了解创建新的空白 `ImageData` 对象的 [createImageData()](canvas_createimagedata.md) 方法。
55+
56+
## JavaScript 语法
57+
58+
| JavaScript 语法: | *context*.putImageData(*imgData,x,y,**dirtyX,dirtyY,dirtyWidth,dirtyHeight*); |
59+
| ---- | ---- |
60+
<!--rehype:style=width: 100%; display: inline-table;-->
61+
62+
## 参数值
63+
64+
| 参数 | 描述 Description |
65+
| ---- | ---- |
66+
| *imgData* | 指定要放回画布上的 ImageData 对象 |
67+
| *x* | ImageData 对象左上角的 x 坐标（以像素为单位） |
68+
| *y* | ImageData 对象左上角的 y 坐标（以像素为单位） |
69+
| *dirtyX* | 选修的。 将图像放置在画布上的水平 (x) 值（以像素为单位） |
70+
| *dirtyY* | 选修的。 将图像放置在画布上的垂直 (y) 值（以像素为单位） |
71+
| *dirtyWidth* | 选修的。 用于在画布上绘制图像的宽度 |
72+
| *dirtyHeight* | 选修的。 用于在画布上绘制图像的高度 |
73+
<!--rehype:style=width: 100%; display: inline-table;-->
74+
75+
[1]: ../assets/chrome.svg
76+
[2]: ../assets/edge.svg
77+
[3]: ../assets/firefox.svg
78+
[4]: ../assets/safari.svg
79+
[5]: ../assets/opera.svg

0 commit comments

Comments
 (0)