canvas学习-使用图片

最新推荐文章于 2022-04-27 09:08:05 发布

weixin_30642267

最新推荐文章于 2022-04-27 09:08:05 发布

阅读量92

点赞数

原文链接：https://juejin.im/post/5d3116c6e51d4556dc2936f4

版权

引入图像到canvas里需要以下两步基本操作：

1.获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片（参见例子）

2.使用drawImage()函数将图片绘制到画布上

获得需要绘制的图片

1.由Image()函数构造出来，或者任意的img元素

2.video元素作为图片源,可以从视频中抓取当前帧

3.使用另一个canvas元素作为图片源

4.ImageBitMap---是一个高性能的位图，可以低延迟的绘制

由零开始创建图像 若调用 drawImage 时，图片没装载完，那什么都不会发生（在一些旧的浏览器中可能会抛出异常）。因此你应该用load事件来保证不会在加载完毕之前使用这个图片

var img = new Image();   // 创建img元素
img.onload = function(){
  // 执行drawImage语句
}
img.src = 'myImage.png'; // 设置图片源地址
复制代码

我们还可以通过 data:url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。

img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
复制代码

使用相同页面内的图片

document.images集合|document.getElementsByTagName()/Id()

使用其他域名下的图片

在 HTMLImageElement上使用crossOrigin属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染canvas，否则，使用这个图片将会污染canvas。

使用其他canvas元素

和引用页面内的图片类似，用document.getElementsByTagName

使用视频帧

你还可以使用video 中的视频帧（即便视频是不可见的）。例如，如果你有一个ID为“myvideo”的video元素，你可以这样做

function getMyVideo() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    return document.getElementById('myvideo');
  }
}
复制代码

绘制图片

一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里 drawImage(image, x, y) 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

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.src = 'images/backdrop.png';
  }

复制代码

缩放scaling

drawImage(image, x, y, width, height) 这个方法多了2个参数：width 和 height，这两个参数用来控制当向canvas画入时应该缩放的大小

例子：平铺图像

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function(){
    for (var i=0;i<4;i++){
      for (var j=0;j<3;j++){
        ctx.drawImage(img,j*50,i*38,50,38);
      }
    }
  };
  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
}

复制代码

切片 slicing

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

例子-相框

function draw() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  // Draw slice
  ctx.drawImage(document.getElementById('source'),
                33,71,104,124,21,20,87,104);

  // Draw frame
  ctx.drawImage(document.getElementById('frame'),0,0);
}
复制代码