Canvas使用教程——图片应用（Using images）

原文：https://developer.mozilla.org/en/Canvas_tutorial/Using_images 

Canvas另一大运用就是可以对图片进行二次创作或修改。貌似这个是目前唯一一个办法可以动态的往图片上加字的方法^o^。图片的格式可以是任意一种Gecko浏览器支持的格式，并且在同一页面上的其他canvas竟然也可以作为源来引用。

Importing images

图片的导入需要2个步骤：

• 首先，我们需要一个javaScript中的image对象或者另一个canvas对象最为源，而不是简单的提供一个图片地址就可以的。
• 其次，我们需要采用drawImage方法在canvas上绘制图形。

我们先来看下第一个步骤，会有4种基本选项供运用：

利用同一页面上的图片
我们可以利用document.images，document.getElementsByTagName，document.getElementById等方法获取同一页面上的图片对象。

利用其它canvas对象
我们可以用document.getElementsByTagName，document.getElementById等方法获取canva对象，不过请先确保你需要获取的canvas对象中已有绘制内容。

用脚本创建一个图形对象
另一个方法就是用脚本创建一个image对象。不过此举最大的缺点就是脚本会等待图片对象完全载入后才会handle接下来的脚本，而在途中我们无法让它停止图片的loading。

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

当脚本执行时，图片便开始loading，如果当执行drawImage方法时图片仍未停止loading，脚本便会暂停执行直至图片载入完成。如果你不想让此情形发生，我们可以利用以下的onload事件来handle：

  1. var img = new Image();   // Create new Image object     2. img.onload = function(){     3.   // execute drawImage statements here     4. }     5. img.src = 'myImage.png'; // Set source path  

用data:url方式引用图片
还有一种对图片的引用方式为data:url。它允许你用一个Base64编码的描述字符串来定义图片。用data urls的一个好处就是图片会在你的界面立即显示而无需去server上下载（或许另一个好处就是我们可以把HTML/JS/CSS/IMAGE都集成在一个文件中^o^），当然，此方式不好的地方也显而易见：如果图片的尺寸过大的话，这个描述字符串也会非常之长哦～～。