请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Canvas 查看内容

HTML5 Canvas颜色填充style

2013-10-4 15:58| 发布者: admin| 查看: 2180| 评论: 0

摘要: 到目前为止,我们只看到过绘制内容的方法。如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle。 fillStyle = colorstrokeStyle = color strokeStyle 是用于设置图形轮廓的颜色,而 fillS ...

到目前为止,我们只看到过绘制内容的方法。如果我们想要给图形上色,有两个重要的属性可以做到: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 的值。

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) + ',' +
    Math.floor(255-42.5*j) + ',0)';

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 方法来画圆。

代码

====================================================

 <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.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>

====================================================

效果

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-11-25 07:46 , Processed in 0.081298 second(s), 26 queries .

返回顶部