From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../globalalpha/index.html | 217 +++++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html (limited to 'files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html') diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html new file mode 100644 index 0000000000..a12923f33f --- /dev/null +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html @@ -0,0 +1,217 @@ +--- +title: CanvasRenderingContext2D.globalAlpha +slug: Web/API/CanvasRenderingContext2D/globalAlpha +translation_of: Web/API/CanvasRenderingContext2D/globalAlpha +--- +
{{APIRef}}
+ +

CanvasRenderingContext2D.globalAlpha 是 Canvas 2D API 用来描述在canvas上绘图之前，设置图形和图片透明度的属性。 数值的范围从 0.0 （完全透明）到1.0 （完全不透明）。

+ +

在 Canvas Tutorial 中参见 Applying styles and color 章节。

+ +

语法

+ +
ctx.globalAlpha = value;
+
+ +

选项

+ +
+
value
+
数字在 0.0  （完全透明）和 1.0 （完全不透明）之间。 默认值是 1.0。 如果数值不在范围内，包括{{jsxref("Infinity")}} 和{{jsxref("NaN")}} ，无法赋值，并且 globalAlpha 会保持原有的数值。
+
+ +

示例

+ +

使用 globalAlpha 属性

+ +

这是一段使用 globalAlpha 属性的简单代码片段，绘制了2个半透明的矩形。

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.globalAlpha = 0.5;
+
+ctx.fillStyle = "blue";
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = "red";
+ctx.fillRect(50, 50, 100, 100);
+
+ +

修改下面的代码并在线查看 canvas的变化：

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+ +

globalAlpha 例子

+ +

此例中， 绘制了4个不同背景色的正方形。 在他们上面，绘制半透明的圆形。 将那个点绘制的所有图形的 globalAlpha 属性值都设置为0.2。通过 for 循环绘制半径逐渐增大的圆形。 最终形成的结果是放射性渐变。通过不停地叠加圆形， 使得先前绘制的圆形的透明度越来越暗。通过增加循环数量绘制更多的圆形，图片中心的背景将会变成完全不透明。

+ +
var ctx = document.getElementById('canvas').getContext('2d');
+
+// draw background
+ctx.fillStyle = '#FD0';
+ctx.fillRect(0,0,75,75);
+ctx.fillStyle = '#6C0';
+ctx.fillRect(75,0,75,75);
+ctx.fillStyle = '#09F';
+ctx.fillRect(0,75,75,75);
+ctx.fillStyle = '#F30';
+ctx.fillRect(75,75,75,75);
+ctx.fillStyle = '#FFF';
+
+// set transparency value
+ctx.globalAlpha = 0.2;
+
+// Draw semi transparent circles
+for (i=0;i<7;i++){
+  ctx.beginPath();
+  ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
+  ctx.fill();
+}
+
+ + + +

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Gecko-specific 注解

+ + + + + + + +

参见

+ + -- cgit v1.2.3-54-g00ecf