HTML5填充颜色的fillStyle测试

全栈程序员-站长 • 2021年12月21日下午6:00 • 未分类 • 阅读 47

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

此处内容已经被作者隐藏，请输入验证码查看内容

请关注本站微信公众号，回复“验证码”，获取验证码。在微信里搜索“全栈程序员社区”或者“www_javaforall_cn”或者微信扫描右侧二维码都可以关注本站微信公众号。

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

代码：

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html;charset=gbk" /> 
 4 <script type="text/javascript">
 5 function draw(){
 6 var ctx = document.getElementById('canvas').getContext('2d');
 7 for (var i=0;i<6;i++){ 
 8 for (var j=0;j<6;j++){ 
 9 ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
10 ctx.fillRect(j*25,i*25,25,25);
11 }
12 }
13 }
14 </script>
15 <title>测试fillStyle - 何问起</title>
16  <meta name="description" content="何问起,hovertree.com" /><meta name="keywords" content=" hovertree.com,何问起" />
17 
18 </head>
19 <body onload="draw();" > 
20 <canvas id="canvas" width="400" height="300">
21 </canvas>
22 <a href="http://hovertree.com/h/bjaf/a064shrh.htm">何问起</a>
23 </body>
24 </html>

http://hovertree.com/texiao/html5/canvas/2/

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

fillStyle = color
strokeStyle = color

strokeStyle 是用于设置图形轮廓的颜色，而 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 的值。

http://hovertree.com/texiao/html5/canvas/3/

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/120675.html原文链接：https://javaforall.net