canvas 可以使用浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。

基本步骤

  1. 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片
  2. 使用drawImage()函数将图片绘制到画布上

可以使用的图片源

这些源统一由 CanvasImageSource类型来引用。

  1. HTMLImageElement 这些图片是由Image()函数构造出来的，或者任何的使用图片 - 图1元素
  2. HTMLVideoElement 用一个HTML的
    元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
  3. HTMLCanvasElement 可以使用另一个 元素作为你的图片源。
  4. ImageBitmap 这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

Notice

  1. 使用相同页面内的图片
    • document.images集合
    • document.getElementsByTagName()方法
    • 如果你知道你想使用的指定图片的ID，你可以用document.getElementById()获得这个图片
  2. 使用其它域名下的图片
    1. 在 HTMLImageElement上使用crossOrigin属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染canvas，否则，使用这个图片将会污染canvas。
  3. 使用其它 canvas 元素
    1. 和引用页面内的图片类似地，用 document.getElementsByTagName 或 document.getElementById 方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。

图片源

  1. // 1. 使用脚本创建图片
  2. var img = new Image();   // 创建img元素
  3. img.onload = function(){
  4.   // 执行drawImage语句
  5. }
  6. img.src = 'myImage.png'; // 设置图片源地址
  8. // 通过 data: url 方式嵌入图像
  9. img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
  11. // 使用视频帧
  12. function getMyVideo() {
  13.   var canvas = document.getElementById('canvas');
  14.   if (canvas.getContext) {
  15.     var ctx = canvas.getContext('2d');
  17.     return document.getElementById('myvideo');
  18.   }
  19. }


绘制图片

使用 drawImage(image, x, y) 将图片绘制到 canvas 中；

  1. function draw() {
  2.     var ctx = document.getElementById('canvas').getContext('2d');
  3.     var img = new Image();
  4.     img.onload = function(){
  5.       ctx.drawImage(img,0,0);
  6.       ctx.beginPath();
  7.       ctx.moveTo(30,96);
  8.       ctx.lineTo(70,66);
  9.       ctx.lineTo(103,76);
  10.       ctx.lineTo(170,15);
  11.       ctx.stroke();
  12.     }
  13.     img.src = 'images/backdrop.png';
  14.   }