Do what you do

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

大家好,我又回来了。。。

不知道大家记得不记得,我们曾经用双重循环做过一个图案的拼接,以达到一个平铺的效果。

不知道你有没有考虑过一件事情,就是平铺能不能实现的更简单一点。比如在CSS的background属性中,就有repeat属性和来实现这个效果,那么,在canvas里可以吗?

可以。。。

其实,有一个更加简单的方法:createPattern。

createPattern(image,type)

该方法接受两个参数。Image可以是一个 mage 象的引用,或者另一个canvas对象。Type必须是下面的字符串值之一:repeat,repeat-x,repeat-y和no-repeat。

图案的应用跟渐变很类似的,创建出一个pattern之后,赋给fillStyle或strokeStyle属性即可。

repeat参数下,图片将进行平铺效果,也就是水平和竖直都展开铺陈。而repeat-x和repeat-y就好理解了,也就是仅水平铺陈与仅垂直铺陈。最后一个就不用说了吧。。。

来段代码:

var img = new Image();  
img.src = 'someimage.png';  
var ptrn = ctx.createPattern(img,'repeat');  

注意:与 drawImage 有点不同,你需要确认 image 对象已经装载完毕,否则图案可能效果不对的。

注意:Firefox 目前只支持属性值repeat 。如果赋其它值,什么效果都没有的。也就是说,如果考虑浏览器的兼容性,那么最好就只使用这一个属性就好了。。。

这最后的例子,我创建一个图案然后赋给了fillStyle属性。值得一提的是,使用Image对象的onload handler来确保设置图案之前图像已经装载完毕。

我觉得如果作为扫盲贴的话讲解一下onload也无所谓的,我这篇东西就不是写给高手看的。。。

首先,onload事件是一个加载完成的事件。什么叫加载完成呢?就是该事件的源内部的所有的元素(代码、图片、文字、样式等等)都已经从服务器端加载完成(或者加载失败,收到404之类的HTTP响应,好比图片挂掉啊啥的,总之就是所有该加载的都加载完了,加载不了的都回复了错误响应了),然后才会执行的事件。那么对这个事件的使用就多用于当加载完成以后执行某些操作(设置交互、处理元素、响应提示之类的)。这个用的最多的就是window.onload了,在页面元素加载完成后执行,不会对加载有什么影响。本例中用到的地方是image的onload,也就是说当图片加载完成之后才会响应。

function draw() {  
  var ctx = document.getElementById('canvas').getContext('2d');  
  
  // create new image object to use as pattern  
  var img = new Image();  
  img.src = 'images/wallpaper.png';  
  img.onload = function(){  
  
    // create pattern  
    var ptrn = ctx.createPattern(img,'repeat');  
    ctx.fillStyle = ptrn;  
    ctx.fillRect(0,0,150,150);  
  
  }  
}  

好了,学习完了平铺的简单处理以后,我们继续下一话题,谈谈阴影的简单处理。

阴影是啥我就不说了,不知道问村长去。Firefox 3.5(Gecko 1.9.1)在canvas中加入了对阴影的支持,就4个属性:

shadowOffsetX = float

shadowOffsetY = float

shadowBlur = float

shadowColor = color

shadowOffsetX和shadowOffsetY用来设定阴影在X和Y轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,他们默认都是0。

shadowBlur用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为0。

shadowColor用于设定阴影效果的延伸,值可以是标准的CSS颜色值,默认是全透明的黑色。

让我们看一个阴影的例子吧:

function draw() {  
  var ctx = document.getElementById('canvas').getContext('2d');  
  
  ctx.shadowOffsetX = 2;  
  ctx.shadowOffsetY = 2;  
  ctx.shadowBlur = 2;  
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";  
   
  ctx.font = "20px Times New Roman";  
  ctx.fillStyle = "Black";  
  ctx.fillText("Sample String", 5, 30);  
}  

这个例子简单的绘制了文字的阴影,相信大家可以理解的。今天讲的就稍微少一点,我们消化一下,等待下一次的一个新的学习对象:变形。相信大家会更加感兴趣的。好啦,我们晚点再见~

posted @ 2012-07-02 11:30  key yao  阅读(377)  评论(0编辑  收藏  举报
学会做事 学会做人