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

CanvasRenderingContext2D.fillStyle 是Canvas 2D API 使用内部方式描述颜色和样式的属性。默认值是 #000 （黑色）。

+ +

参见  Canvas Tutorial 的 Applying styles and color 章节。

+ +

语法

+ +
ctx.fillStyle = color;
+ctx.fillStyle = gradient;
+ctx.fillStyle = pattern;
+
+ +

选项

+ +
+
color
+
{{domxref("DOMString")}} 字符串，被转换成 CSS {{cssxref("<color>")}} 颜色值.
+
gradient
+
{{domxref("CanvasGradient")}} 对象 （线性渐变或者放射性渐变）.
+
pattern
+
{{domxref("CanvasPattern")}} 对象 （可重复图像）。
+
+ +

示例

+ +

使用 fillStyle 属性设置不同的颜色

+ +

这是一段简单的代码片段，使用 fillStyle 属性设置不同的颜色。

+ +

HTML

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

JavaScript

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

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

+ + + +

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

+ +

fillStyle 使用 for 循环的例子

+ +

在这个例子中， 我们使用两个 for 循环绘制一个矩形表格，每个单元格都有不同的颜色。 最终的结果图像看起来像屏幕截图，其实没有令人惊叹的事情发生。我们使用两个变量 i 和 j 为每一个单元格生成唯一的RGB颜色，并且只改变红色和绿色的数值。蓝色通道的值是固定不变的。通过修改这些通道，你能生成各种各样的调色板。通过逐步地增加，你能实现类似 Photoshop 的调色板。

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+for (var i=0;i<6;i++){
+  for (var j=0;j<6;j++){
+    ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
+                     Math.floor(255-42.5*j) + ',0)';
+    ctx.fillRect(j*25,i*25,25,25);
+  }
+}
+
+ +

结果看起来像是这样的：

+ +

{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

规格描述

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

浏览器兼容性

+ + + +

{{Compat("api.CanvasRenderingContext2D.fillStyle")}}

+ +
+ + + + + +

参见

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