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

水深无声 2021-12-18 13:51 121阅读 0赞

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

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

不知道你有没有考虑过一件事情，就是平铺能不能实现的更简单一点。比如在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);  
    }

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

转载于:https://www.cnblogs.com/xiao-yao/archive/2012/07/02/2572919.html