前端基础_fillStyle和strokeStyle属性

fillStyle和strokeStyle属性

在前面的章节，在绘制图形时只用到默认的线条和填充样式。而在本节中将会探讨canvas全部的可选项，来绘制出更加吸引人的内容。如果想要给图形上色，有两个重要的属性可以做到：fillStyle和strokeStyle。这两个属性的定义方法如下。

fillStyle = color
    strokeStyle = color

strokeStyle用于设置图形轮廓的颜色，而fillStyle用于设置填充颜色。color可以是表示CSS颜色值的字符串、渐变对象或者图案对象。渐变和图案对象将在后面的章节中进行讲解。默认情况下，线条和填充颜色都是黑色（CSS颜色值#000000）。这里需要注意的是，如果自定义颜色则应该保证输入符合CSS颜色值标准的有效字符串。下面的代码都是符合标准的颜色表示方式，都表示同一种颜色（橙色）。

context.fillStyle = "orange";

 context.fillStyle = "#FFA500";

 context.fillStyle = "rgb(255,165,0)"; 

 context.fillStyle = "rgba(255,165,0,1)";

注意

一旦设置了strokeStyle或者fillStyle的值，那么这个新值就会成为新绘制的图形的默认值。如果想要给每个图形上不同的颜色，就需要重新设置fillStyle或strokeStyle的值。

【例17.7】下面看一下fillStyle实例，在本实例中，使用两层for循环来绘制方格阵列，每个方格使用不同的颜色。

从效果图可以看出色彩很绚丽。但是，实现的代码很简单，只需要两个变量i和j来为每一个方格产生唯一的RGB色彩值，其中仅修改红色和绿色的值，而保持蓝色的值不变。通过修改这些颜色的值来产生各种各样的色板。

https://www.bilibili.com/video/BV1Gv4y1Q7px/?spm_id_from=333.999.0.0&vd_source=a7816e3b2a3a67ac39dc87f6bf92421chttps://www.bilibili.com/video/BV1Gv4y1Q7px/?spm_id_from=333.999.0.0&vd_source=a7816e3b2a3a67ac39dc87f6bf92421c