20-文本图像图案

3.4.3　文本图像图案

视频图案：遗憾的事 HTML5 Canvas API提出HTML5视频元素可以作为createPattern() 方法的图像源。但是，为此做的所有尝试都返回了下列JavaScript错误。 根据www.gnu.org提供的DOM参考，DOM Exception 17，TYPE_MISMATCH_ERR在“如果对象关联参数的对象类型与预期类型不兼容时”发生。 所以，看起来所有的浏览器都未支持将视频作为createPattern()方法的图案。不过，读者仍然可以在Canvas下加载和播放图像。第6章将对此进行深入讨论。

HTML5 Canvas文本填充的另一个选项是图像对象。本书将在第4章来讨论如何使用Image API，因此这里只介绍文本图案填充的基础。

创建一个图像图案，需要调用Canvas环境的createPattern() 方法，引用Image对象，设置repetition选项。

Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17

var pattern = context.createPattern([image], [repetition]);

• image：通过设置pattern.src属性来加载有效Image对象，在等待图像加载时，要为Image onload事件设置一个事件监听器。Canvas规范也可以使用video元素或者其他 画布作为文本图案填充。
• repetition：图像的重复铺设。可设置以下值。
  • repeat：图像沿x轴和y轴同时铺设。
  • repeat-x：图像仅沿x轴铺设（水平）。
  • repeat-y：图像仅沿y轴铺设（垂直）。
  • no-repeat：图像无铺设。

使用图像图案时，如同应用颜色一样，应用到上下文的fillStyle和strokeStyle属性上即可。

context.fillStyle = pattern;

或者：

context.strokeStyle = pattern;

例如，加载一个名为texture.jpg的图像，将其应用到fillStyle属性，并沿x轴和y轴同时铺设，代码如下。

var patternImage = new Image(); 
patternImage.src = "texture.jpg" 
patternImage.onload = function() { 
var pattern = context.createPattern(patternImage, "repeat"); 
context.fillStyle = pattern; 
... 
}