到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。 fillStyle = 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 的值。 Canvas填充样式fillStyle
说明 在本示例里，我会再度用两层 for 循环来绘制方格阵列，每个方格不同的颜色。结果如右图，但实现所用的代码却没那么绚丽。我用了两个变量 i 和 j 来为每一个方格产生唯一的 RGB 色彩值，其中仅修改红色和绿色通道的值，而保持蓝色通道的值不变。你可以通过修改这些颜色通道的值来产生各种各样的色板。通过增加渐变的频率，你还可以绘制出类似 Photoshop 里面的那样的调色板。 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script type="text/javascript"> function draw() { 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) + ',' + ctx.fillRect(j*25,i*25,25,25); } } } script> <title>测试fillStyletitle> head> <body onload="draw();" > <canvas id="canvas" width="400" height="300"> </canvas> body> html> 效果
Canvas strokeStyle 案例说明 这个示例与上面的有点类似，但这次用到的是 strokeStyle 属性，而且画的不是方格，而是用 arc 方法来画圆。 代码 ==================================================== <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script type="text/javascript"> function draw() { var ctx =
document.getElementById('canvas').getContext('2d'); for (var i=0;i<6;i++){
for (var
j=0;j<6;j++){ ctx.strokeStyle
= 'rgb(0,' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j)
+ ')'; ctx.beginPath(); ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true); ctx.stroke();
} }
} </script> <title>测试strokeStyle</title> </head> <body onload="draw();" > <canvas id="canvas" width="400"
height="300"> </canvas> </body> </html> ==================================================== 效果
透明度 Transparency
除了可以绘制实色图形，我们还可以用 canvas 来绘制半透明的图形。通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。 globalAlpha =
transparency value globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为下面的方法可操作性更强一点。 因为 strokeStyle 和 fillStyle 属性接受符合 CSS 3 规范的颜色值，那我们可以用下面的写法来设置具有透明度的颜色。 ctx.strokeStyle =
"rgba(255,0,0,0.5)"; ctx.fillStyle =
"rgba(255,0,0,0.5)"; rgba() 方法与 rgb() 方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。 Canvas 透明度globalAlpha 说明 在这个例子里，我用四色格作为背景，设置 globalAlpha 为 0.2后，在上面画一系列半径递增的半透明圆。最终结果是一个径向渐变效果。圆叠加得越更多，原先所画的圆的透明度会越低。通过增加循环次数，画更多的圆，背景图的中心部分会完全消失。 注意: 这个例子在 Firefox 1.5 beta 1 里是行不通的。你需要 nightly branch build 或者等待新版本发布来实践这个效果。 这个例子在 Safari 下可能由于颜色值无效而达不到效果。例子里是 '#09F' 是不符合规范要求的，不过 Firefox 是认识这种格式的。 代码 ==================================================== <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script type="text/javascript"> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // draw background ctx.fillStyle = '#FD0'; ctx.fillRect(0,0,75,75); ctx.fillStyle = '#6C0'; ctx.fillRect(75,0,75,75); ctx.fillStyle = '#09F'; ctx.fillRect(0,75,75,75); ctx.fillStyle = '#F30'; ctx.fillRect(75,75,150,150); ctx.fillStyle = '#FFF'; ctx.globalAlpha = 0.2; // Draw semi transparent circles for (var i=0;i<7;i++){ ctx.beginPath(); ctx.arc(75,75,10+10*i,0,Math.PI*2,true); ctx.fill(); } } </script> <title>测试strokeStyle</title> </head> <body onload="draw();" > <canvas id="canvas" width="400" height="300"> </canvas> </body> </html> ==================================================== 效果
|
京ICP备14042305号
html5star team © 2012-2013 html5星空 Comsenz Inc.
GMT+8, 2020-9-22 22:59 , Processed in 0.085000 second(s), 29 queries .
