说说在 Canvas 中如何填充形状基本颜色

骑猪看日落 2022-12-12 02:13 502阅读 0赞

Canvas 的 fillSytle 属性可设置形状的填充颜色。该属性可接受多种类型的颜色描述值。

**（1）颜色字符串名称**

context.fillStyle = "red";
     context.fillRect(100, 100, 100, 100);

运行结果：

![1d84e0b785a070ad1297b5bea2a39ef9.png][]

注意：HTML 4.0 只支持 16 种颜色名，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

目前还没有 HTML5 专属的颜色名。

以上这些类型的颜色描述值也可以应用到 strokestyle 属性中。

**（2）rgb() 方法**

利用 rgb() 方法设定 24 位 RGB 值来指定填充颜色。

context.fillStyle = "rgb(255,127,80)";

运行结果：

![26ba2bbab7290ecf7cf1887d14db90ab.png][]

**（3）十六进制数字字符串**

也可以使用一个十六进制数字字符串来指定填充颜色。

context.fillStyle = "#6495ED";

运行结果：

![72af12f88be18fbb1d4f9514c4f653ef.png][]

**（4）rgba( ) 方法**

rgba( ) 方法可以指定 32 位色值来指定填充颜色，其后8位表示透明度，a 是 Alpha 的缩写。

context.fillStyle = "rgba(255,127,80,0.5)";

运行结果：

![a4fab3dfe4b1fd6298d1f727c3d18e98.png][]

透明度范围为 1( 不透明 ) ~ 0 (完全透明 )，示例代码设置为 0.5，表示半透明。

[1d84e0b785a070ad1297b5bea2a39ef9.png]: /images/20221123/686a757ea2d1409693470086aec8317e.png
[26ba2bbab7290ecf7cf1887d14db90ab.png]: /images/20221123/ed6a6f4e71fa4d19aa0d249e4c32113c.png
[72af12f88be18fbb1d4f9514c4f653ef.png]: /images/20221123/cce7404385474db082ae14d1cca22516.png
[a4fab3dfe4b1fd6298d1f727c3d18e98.png]: /images/20221123/3a41496db9114c1aa5e4467210be15cf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，502人围观）

还没有评论，来说两句吧...

相关阅读

相关如何在 CSS 中创建形状

在今天的教程中，让我们创建一个可以使用 CSS3 创建的最常见形状的简单列表。我们将通过文章取得进展，最后，您将学习如何创造真正伟大的东西。本教程将让您深入了解 CSS3

野性酷女/ 2023年09月28日 08:19/ 0 赞/ 129 阅读

相关说说如何使用 Canvas 绘制基本矩形

HTML5 提供的 canvas 元素，可以让我们使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，我们可以控制其每一像素。canvas 拥有多种绘制路径、矩形

绝地灬酷狼/ 2023年02月17日 12:30/ 0 赞/ 7 阅读

相关 python填充颜色函数_编写一个函数，要求用户输入颜色，然后用th填充形状

I have the circle-drawing down 在解决你的填充问题之前，我认为你的前提是不正确的，你没有画圆。如@Mysak0CZ所示，你的半径为1的圆是巨大的

拼搏现实的明天。/ 2022年12月31日 10:23/ 0 赞/ 167 阅读

相关说说在 Canvas 中如何判断某个点是否在路径上

Context 的 isPointInPath() 可用于判断某个点是否在路径上。如果指定的点位于当前路径中，则返回 True。语法为：`context.isPointInPa

冷不防/ 2022年12月12日 15:14/ 0 赞/ 222 阅读

相关说说在 Canvas 中如何清除画布

有几种方法可以清除画布中的内容。 1 重置画布宽与高假设目前画布有一个彩虹圆形，我们现在要把它清除掉。 ![2982e78fa987c5e85f60a23872af

客官°小女子只卖身不卖艺/ 2022年12月12日 15:14/ 0 赞/ 331 阅读

相关说说在 Canvas 中如何添加阴影

Canvas 的 context 中有四个参数可以用于设置阴影相关属性。 <table> <thead> <tr> <th>方法名</th> <th

约定不等于承诺〃/ 2022年12月12日 13:46/ 0 赞/ 272 阅读

相关说说在 Canvas 中如何用图片来填充形状

context 的 createPattern() 方法可以在指定的方向内重复指定的元素。语法为 `context.createPattern(image,"repeat|re

川长思鸟来/ 2022年12月12日 13:46/ 0 赞/ 237 阅读

相关说说在 Canvas 中如何填充渐变颜色

渐变颜色填充方式有两种：线性或径向。 1. 线性渐变填充会创建一个水平、垂直或者对角线的填充图案。 2. 径向渐变填充会自中心点创建一个放射状填充图案。 1 线性

我会带着你远行/ 2022年12月12日 13:43/ 0 赞/ 632 阅读

相关说说在 Canvas 中如何填充形状基本颜色

Canvas 的 fillSytle 属性可设置形状的填充颜色。该属性可接受多种类型的颜色描述值。（1）颜色字符串名称 context.fillStyle = "

骑猪看日落/ 2022年12月12日 02:13/ 0 赞/ 503 阅读

相关如何解决颜色填充（Bucket fill）的颜色不对？

那些年，我们刚接触photoshop，是否也遇到过这样的困惑：ps填充颜色不对。明明前景色我们选取的就是一种彩色，可是填充出来就是灰色的。 Photoshop中的图像模式有：

比眉伴天荒/ 2022年02月24日 04:30/ 0 赞/ 303 阅读