HTML5填充颜色的fillStyle代码使用方法

浏览: 103 发布日期: 2017-07-02 分类: html

本文将为关注x枫林的朋友提供的是的HTML5填充颜色的fillStyle测试相关教程,具体实例代码请看下文:

效果:http://zhimengzhe.com/texiao/html5/canvas/1/

代码:

 1 
 2 
 3  
 4 
15 测试fillStyle - 何问起
16  
17 
18 
19  
20 
21 
22 何问起
23 
24 

如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle。

fillStyle = colorstrokeStyle = colorstrokeStyle 是用于设置图形轮廓的颜色,而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000)。下面的例子都表示同一种颜色。// 这些 fillStyle 的值均为 '橙色'ctx.fillStyle = "orange";ctx.fillStyle = "#FFA500";ctx.fillStyle = "rgb(255,165,0)";ctx.fillStyle = "rgba(255,165,0,1)";注意: 目前 Gecko 引擎并没有提供对所有的 CSS 3 颜色值的支持。例如,hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值,那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色,你需要重新设置 fillStyle 或 strokeStyle 的值。

Canvas填充样式fillStyle说明在本示例里,我会再度用两层for循环来绘制方格阵列,每个方格不同的颜色。结果如图,但实现所用的代码却没那么绚丽。我用了两个变量i和j 为每一个方格产生唯一的RGB色彩值,其中仅修改红色和绿色通道的值,而保持蓝色通道的值不变。你可以通过修改这些颜色通道的值来产生各种各样的色板。通过增加渐变的频率,你还可以绘制出类似 Photoshop 里面的那样的调色板。

 

多多关注x枫林,我们将为您收集更多的html相关文章.

返回顶部