HTML5 canvas 元素详细教程三_H5之家 - 中国HTML5教程资源分享第一站

HTML5 canvas 元素详细教程：
应用图像。

HTML5 Canvas 可以引入图像，用于图片合成或者制作背景等。但目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是 Gecko 支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。

引入图像
HTML5 Canvas引入图像只需要简单的两步：1、首先当然是来源图片，不是简单的 URL 路径，但可以是一个 JavaScript 的 Image 对象引用，又或者其它的 canvas 元素，2、用 drawImage 方法将图像插入到 canvas 中。
先来看看第1步，基本上有四种可选方式：

引用页面内的图片
这可以通过 document.images 集合和document.getElementsByTagName 方法又或者 document.getElementById 方法来获取页面内的图片（如果已知图片元素的 ID）。

使用其它 canvas 元素 Using other canvas elements
和引用页面内的图片类似地，用 document.getElementsByTagName 或 document.getElementById 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。

由零开始创建图像
另外，我们可以用脚本创建一个新的 Image 对象，但这种方法的主要缺点是如果不希望脚本因为等待图片装置而暂停，还得需要突破预装载。
我们可以通过下面简单的方法来创建图片：
            var img = new Image(); // Create new Image objectimg.src = 'myImage.png'; // Set source path当脚本执行后，图片开始装载。若调用 drawImage 时，图片没装载完，脚本会等待直至装载完毕。如果不希望这样，可以使用 onload 事件：
            var img = new Image(); // Create new Image objectimg.onload = function(){  // execute drawImage statements here}img.src = 'myImage.png'; // Set source path如果你只用到一张图片的话，这已经够了。但一旦需要不止一张图片，那就需要更加复杂的处理方法，但图片预装载策略超出本教程的范围，感兴趣的话可以参考JavaScript Image Preloader。

通过 data: url 方式嵌入图像
我们还可以通“Data:_URL”方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。其优点就是图片内容即时可用，无须再到服务器兜一圈。（还有一个优点是，可以将 CSS，JavaScript，HTML 和图片全部封装在一起，迁移起来十分方便。）缺点就是图像没法缓存，图片大的话内嵌的 url 数据会相当的长：
            var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

drawImage
一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。drawImage 方法有三种形态，下面是最基础的一种。
drawImage(image, x, y)

其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
drawImage 示例 1

下面一个例子我用一个外部图像作为一线性图的背景。用背景图我们就不需要绘制负责的背景，省下不少代码。这里只用到一个 image 对象，于是就在它的 onload 事件响应函数中触发绘制动作。drawImage 方法将背景图放置在 canvas 的左上角(0,0) 处。

function draw() {

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

var img = new Image();

img.onload = function(){

ctx.drawImage(img,0,0);

ctx.beginPath();

ctx.moveTo(30,96);

ctx.lineTo(70,66);

ctx.lineTo(103,76);

ctx.lineTo(170,15);

ctx.stroke();

}

img.src = 'images/backdrop.png';

}

复制代码

缩放
drawImage 方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。
drawImage(image, x, y, width, height)

Where width and height is the image's size on the target canvas. 当中 width 和 height 分别是图像在 canvas 中显示大小。
drawImage 示例 2

在这个例子里，我会用一张图片像背景一样在 canvas 中以重复平铺开来。实现起来也很简单，只需要循环铺开经过缩放的图片即可。见下面的代码，第一层 for 循环是做行重复，第二层是做列重复的。图像大小被缩放至原来的三分之一，50x38 px。这种方法可以用来很好的达到背景图案的效果，在下面的教程中会看到。
注意：图像可能会因为大幅度的缩放而变得起杂点或者模糊。如果您的图像里面有文字，那么最好还是不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。

function draw() {

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

var img = new Image();

img.onload = function(){

for (i=0;i<4;i++){

for (j=0;j<3;j++){

ctx.drawImage(img,j*50,i*38,50,38);

}

img.src = 'images/rhino.jpg';

}

复制代码