canvas--使用图片

引入图像到canvas里

需要以下两步基本操作：

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

canvas的API可以使用下面这些类型中的一种作为图片的源：

1.1 HTMLImageElement

这些图片是由Image()函数构造出来的，或者任何的img元素

1.2 HTMLVideoElement

用一个HTML的 video元素作为你的图片源，可以从视频中抓取当前帧作为一个图像

1.3 HTMLCanvasElement

可以使用另一个 canvas 元素作为你的图片源。

1.4 ImageBitmap

这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

获取图片的方式

  • 使用相同页面的图片（同域）
  • 使用其他域名下的图片（跨域）
  • 使用其他canvas元素
  • 从零开始创建图像
  • 通过data：url方式嵌入图像
  • 使用视频帧

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

    2.1 绘制图片

    drawImage(image,x,y)

2.2 缩放 Scaling

drawImage(image, x, y, width, height)

1
2
3
4
5
6
7
8
9
10
11
function draw() {
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.onload = function () {
            ctx.drawImage(img, 0, 0, 150, 150);
        }
        img.src = "./test.jpg";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function draw() {
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.onload = function () {
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    ctx.drawImage(img, i * 50, j * 50, 50, 50);
                }
            }
        }
        img.src = "./test.jpg";
    }
}

2.2 切片 Slicing

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

  • sx,sy,sWidth,sHeight 是定义图像源的切片位置和大小
  • dx,dy,dWidth,dHeight 是定义切片的目标显示位置和大小。
1
2
3
4
5
6
7
8
9
10
11
12
function draw() {
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.onload = function () {
            ctx.drawImage(img, 50,71,704,824,21,20,237,304);

        }
        img.src="./avatar.png"
    }
}

合成两张图片

1
2
3
4
5
6
7
8
9
10
11
12
function draw() {
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.onload = function () {
            ctx.drawImage(document.getElementById('bg'),-50,-50)
            ctx.drawImage(img, 50,71,704,824,21,20,237,304);
        }
        img.src="./avatar.png"
    }
}