Do what you do

canvas元素简易教程(6)(大部分转自火狐,自己只写了简单的代码分析)

来吧来吧,只学会了前面那些东西可不够的,咱们来学习新东西了。。。

通过前面的学习,我们初步了解了canvas绘图的使用,了解了怎么通过canvas去画图像,去处理图像,但是我们是否会觉得这样处理之后的东西显得色彩有些单调呢?

好的,我们这一次主要就来学习一下关于颜色的处理吧~

在绘制图形的学习中,我们使用的样式都是canvas的默认样式。今天我们要学习的是canvas的所有可选项,通过这些可选项,我们将学习到更多更有用的更强大的东西。

到目前为止,我们只看到过绘制内容的方法。如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle和strokeStyle。

fillStyle = color

strokeStyle = color

strokeStyle是用于设置图形轮廓的颜色,而fillStyle用于设置填充颜色。color可以是表示CSS颜色值的字符串,渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下,线条和填充颜色都是黑色(CSS颜色值#000000)。

您输入的应该是符合CSS3颜色值标准的有效字符串。下面的例子都表示同一种颜色。

// 这些 fillStyle 的值均为 '橙色' 

ctx.fillStyle = "orange"; 

ctx.fillStyle = "#FFA500"; 

ctx.fillStyle = "rgb(255,165,0)"; 

ctx.fillStyle = "rgba(255,165,0,1)"; 

注意: 目前Gecko引擎并没有提供对所有的CSS3颜色值的支持。例如,hsl(100%,25%,0)或者rgb(0,100%,0)都不可用。但如果您遵循上面例子的规范,应该不会有问题。

注意: 一旦您设置了strokeStyle或者fillStyle的值,那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色,你需要重新设置fillStyle或strokeStyle的值。

来个好理解的例子:

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); 

    } 

  } 

在这个例子中,内外嵌套的两个循环为画布绘出了6*6的颜色块,通过颜色的变化得到一个渐变的效果(当然不是渐变,没有过度,只是颜色逐渐变化了而已。。。)通过不同的增长我们可以做出一个类似调色板那样的东西,这是不是很好玩啊~(不是HTML5也能啊。。。)

例子永远不嫌多的是吧~上第二段代码:

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(); 

      } 

    } 

  } 

这次的例子与上一个有点类似,只有一点变化。第一是这个例子是用arc方法画圆,第二是这个例子是用的strokeStyle属性描边框。

还记得我们进行的第一个例子吗?对了,就是那两个小方块,怎么画矩形怎么上色咱们都学了,但是不是还有一个没有学到呢?对啦,透明度~

我们可以用canvas来绘制半透明的图形。通过设置globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式。

globalAlpha = transparency value

这个属性影响到canvas里所有图形的透明度,有效的值范围是0.0(完全透明)到1.0(完全不透明),默认是1.0。

globalAlpha属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过,我认为下面的方法可操作性更强一点。

因为strokeStyle和fillStyle属性接受符合CSS3规范的颜色值,那我们可以用下面的写法来设置具有透明度的颜色:

ctx.strokeStyle = "rgba(255,0,0,0.5)"; 

ctx.fillStyle = "rgba(255,0,0,0.5)"; 

rgba()方法与rgb()方法类似,就多了一个用于设置色彩透明度的参数。它的有效范围是从0.0(完全透明)到1.0(完全不透明)。

让我们来看个例子吧:

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,75,75); 

  ctx.fillStyle = '#FFF'; 

 

  // set transparency value 

  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(); 

  } 

这个例子中我们先画了四个大色块,然后以中心为原点画出了七个透明的同心圆,设置globalAlpha为0.2后,在上面画一系列半径递增的半透明圆。最终结果是一个径向渐变效果。圆叠加得越更多,原先所画的圆的透明度会越低。通过增加循环次数,画更多的圆,背景图的中心部分会完全消失。

注意:

这个例子在Firefox 1.5 beta 1里是行不通的。你需要nightly branch build或者等待新版本发布来实践这个效果。

这个例子在Safari下可能由于颜色值无效而达不到效果。例子里是'#09F'是不符合规范要求的,不过Firefox是认识这种格式的。

第二个例子和上面那个类似,不过不是画圆,而是画矩形。这里还可以看出,rgba()可以分别设置轮廓和填充样式,因而具有更好的可操作性和使用弹性。

让我们上代码:

function draw() { 

  var ctx = document.getElementById('canvas').getContext('2d'); 

 

  // Draw background 

  ctx.fillStyle = 'rgb(255,221,0)'; 

  ctx.fillRect(0,0,150,37.5); 

  ctx.fillStyle = 'rgb(102,204,0)'; 

  ctx.fillRect(0,37.5,150,37.5); 

  ctx.fillStyle = 'rgb(0,153,255)'; 

  ctx.fillRect(0,75,150,37.5); 

  ctx.fillStyle = 'rgb(255,51,0)'; 

  ctx.fillRect(0,112.5,150,37.5); 

 

  // Draw semi transparent rectangles 

  for (var i=0;i<10;i++){ 

    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')'; 

    for (var j=0;j<4;j++){ 

      ctx.fillRect(5+i*14,5+j*37.5,14,27.5) 

    } 

  } 

例子中先用fillRect方法画了四个矩形并填充,然后在循环中用rgba来控制透明度,依次递减的显示。这里还可以看出,rgba() 可以分别设置轮廓和填充样式,因而具有更好的可操作性和使用弹性。

好了,今天的教学先到这里,我们下次继续。拜~

posted @ 2012-03-27 16:33  key yao  阅读(325)  评论(0编辑  收藏  举报
学会做事 学会做人