HTML5 Canvas之图片引用
图片应用的方式
１. 引用页面内的图片
我们可以通过 document.images 集合、document.getElementsByTagName 方法又或者 document.getElementById 方法来获取页面内的图片（如果已知图片元素的 ID。
２. 由零开始创建图像
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(image, x, y)
实例：
<script type="application/x-javascript">function draw(){var ctx = document.getElementById('canvas').getContext('2d');var img = new Image();img.src = 'image/backdrop.png';img.onload = function(){ctx.drawImage(img,0,0);ctx.beginPath();}}</script>
２.缩放图片
drawImage(image, x, y, width, height)x,y : 图片绘制的位置width、height：绘制图片的宽、高：width/image.width :比例缩放
切片
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
梦里梦外;
不念不忘少年蓝@
小鱼儿
Bertha 。
你的名字
还没有评论，来说两句吧...