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.class="lazy" data-src = 'myImage.png';
我们还可以通过 data: url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。其优点就是图片内容即时可用，无须再到服务器兜一圈。（还有一个优点是，可以将 CSS，JavaScript，HTML 和 图片全部封装在一起，迁移起来十分方便。）缺点就是图像没法缓存，图片大的话内嵌的 url 数据会相当的长：
Var img_class="lazy" data-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.class="lazy" data-src = 'myImage.png'; // Set source path
如果你只用到一张图片的话，这已经够了。但一旦需要不止一张图片，那就需要更加复杂的处理方法，但图片预装载策略超出本教程的范围，感兴趣的话可以参考JavaScript Image Preloader。
drawImage 示例 1
说明
下面一个例子我用一个外部图像作为一线性图的背景。用背景图我们就不需要绘制负责的背景，省下不少代码。这里只用到一个 image 对象，于是就在它的 onload 事件响应函数中触发绘制动作。drawImage 方法将背景图放置在 canvas 的左上角 (0,0) 处。
代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--[if IE]>
<script type="text/javascript" class="lazy" data-src="excanvas.js"></script>
<script type="text/javascript" class="lazy" data-src="excanvas.compiled.js"></script>
<![endif]-->
<script type="text/javascript">
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.class="lazy" data-src = '../ren.gif';
}
</script>
<title>测试图像1</title>
</head>
<body onload="draw();" >
<canvas id="canvas" width="150" height="150">
</canvas>
</body>
</html>
感谢各位的阅读！关于“HTML5 Canvas如何绘制图像”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
