上一篇介绍了 HTML5 中 Canvas 的路径,这篇将要介绍一下 Canvas 中的颜色及渐变。
Canvas 中的基本颜色系统
在 Canvas 中,颜色主要用途就是在绘制路径时,用来指定填充颜色和边框颜色。
Canvas 中的颜色参数值有两种格式:
1. 如果透明度为 1.0,也就是不透明,颜色值的格式就与一般使用一样,为:#AABBCC,其中 AA、BB、CC 分别为 Red、Green、Blue 分量。
2. 如果透明度不为 1.0,也就是带透明,颜色值格式可以使用 rgba(r, g, b, a),其中 r、g、b、a 分别为 Red、Green、Blue 分量和透明度。透明度的值为 0 至 1.0 之间的一个数值。
3. 颜色值还可以为已知的颜色名称,例如 red、blue、green 等。
总的说来,Canvas 中颜色值的格式与 CSS 中一致,因此颜色值没有特别需要注意的地方。
<div id="_mcePaste"><canvas id="canvas" width="600" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // fill a rectangle whit sepecified fill style function fillRect(color) { ctx.fillStyle = color; ctx.fillRect(0, 0, 150, 100); ctx.font = "10pt Arial"; ctx.fillStyle = "white"; ctx.fillText(color, 6, 20); ctx.translate(160, 0); } ctx.translate(0, 50); // fill rect with color name fillRect("green"); // fill rect with 0xAABBCC fillRect("#AABBCC"); // fill rect with rgba(50, 100, 150, 0.5) ctx.translate(0, -25); fillRect("rgba(50,100,150,0.5)"); // fill another rect with rgba(150, 100, 50, 0.5) ctx.translate(-110, 50); fillRect("rgba(150, 100, 50, 0.5)"); </script></div> |
注意,以上代码需要使用 Firefox 3.5 来查看,在 Firefox 3.0.x 中,Canvas 的 Context 对象不支持 fillText 方法,而我安装的 Chrome 2.0.174.0 对 translate 方法的实现有误。
2. Canvas 中的渐变
WHATWG 的 Canvas 规范中规划了两种渐变模式,一种是线性渐变,另一种是径向渐变。如果需要在 Canvas 中使用渐变,首先要根据你所要创建的渐变模式来调用 Context 的相应方法来创建一个渐变对象,这个对象就是用来控制渐变的效果。
近期评论