HTML5 Canvas 绘制图像

2013-10-2 11:55| 发布者: admin| 查看: 3321| 评论: 0

摘要: canvas可以引入图像，它可以用于图片合成或者制作背景等。只要是Gecko支持的图像（如PNG，GIF，JPEG等）都可以引入到canvas中，而且其它的canvas元素也可以作为图像的来源。获取图像的方式我们可以通过document.imag ...

canvas可以引入图像，它可以用于图片合成或者制作背景等。只要是 Gecko 支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。

获取图像的方式

我们可以通过 document.images 集合、document.getElementsByTagName(canvasName||imageName) 方法又或者 document.getElementById(canvasId||imageId) 方法来获取页面内的图片。

我们可以通过下面简单的方法来创建图片：

var img = new Image();

img.src = 'myImage.png';

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

Var img_src =

'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

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

drawImage(image, x, y)

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

当脚本执行后，图片开始装载。若调用 drawImage 时，图片没装载完，脚本会等待直至装载完毕。如果不希望这样，可以使用 onload 事件：

var img = new Image(); // Create new Image object

img.onload = function(){

// execute drawImage statements here

}

img.src = 'myImage.png'; // Set source path

如果你只用到一张图片的话，这已经够了。但一旦需要不止一张图片，那就需要更加复杂的处理方法，但图片预装载策略超出本教程的范围，感兴趣的话可以参考JavaScript Image Preloader。