HTML5 Canvas之图片引用

https://developer.mozilla.org/cn/Canvas_tutorial/Using_images#drawImage_.E7.A4.BA.E4.BE.8B_1

图片应用的方式

１.　引用页面内的图片

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

２.　由零开始创建图像

var img = new Image();   // Create new Image object  
img.src = 'myImage.png'; // Set source path 

　　当脚本执行后，图片开始装载。若调用 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

３.　通过 data: url 方式嵌入图像

　　我们还可以通过 data: url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。其优点就是图片内容即时可用，

　　无须再到服务器兜一圈。（还有一个优点是，可以将 CSS，JavaScript，HTML 和 图片全部封装在一起，迁移起来十分方便。）缺点就是图像没法缓存，

　　图片大的话内嵌的 url 数据会相当的长

var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkc

　　　　　　　　uO4lmNVindo7qyrIXiGBYAOw=='; 

　　

图片的调用

１.　绘制图片

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 :比例缩放

3. 切片

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)