HTML5 Canvas如何绘制图像

这篇文章给大家分享的是有关HTML5 Canvas如何绘制图像的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
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。
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 = ‘../ren.gif’;
}

感谢各位的阅读！关于“HTML5 Canvas如何绘制图像”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

相关推荐: TypeScript中的class和interface怎么用

这篇文章主要介绍了TypeScript中的class和interface怎么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇TypeScript中的class和interface怎么用文章都会有所收获，下面我们一起来看看吧。首页我…