← Canvas 绘制文本注意事项 Canvas 图像来源 CanvasImageSource →

Canvas 绘制图像 drawImage()

Canvas 更有意思的一项特性就是图像操作能力，既可以用于动态的图像合成或者作为图形的背景，以及游戏界面 ( Sprites) 等等

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

接下来的范例，我们将使用下面这张图片

注意，我在这里指定了图片的 id 为 img 方便下文使用

图片的宽高是 160x160

图片的 URL 地址是

https://www.twle.cn/static/i/meimei_160x160.png

一旦我们获得了一张图片，我们就可以使用 drawImage() 方法将它绘制到 Canvas 上

怎么绘制图片

在我们继续讲解 drawImage() 方法之前，我们先来讲讲如何绘制图片

图片本身就是一个矩形，它有自己的左上角 (0,0) 和宽高 ( w,h )

我们可以将整张图片绘制到画布上，也可以将图片的一部分绘制到画布上

比如我们可以从图片的 (sx,sy) 点开始截取宽高为 (sWidth,sHeight) 的一部分绘制到画布上

如果 sx=0,sy=0 且 sWidth=width,sHeight=height 那么就是整张图片绘制到画布上

我们再来看看画布，画布也是一个矩形，它也有自己的宽高，我们把图片绘制到画布的时候必须指定从哪个点 (dx,dy) 开始画

如果指定的点 dx=0,dy=0 其实就是从屏幕的左上角开始画起

当然，这样就是可能占据画布的大部分空间，也可能会把其它已经在画布上的东西遮住

所以，也可以在画布上指定区域 (dWidth,dHeight)，只将图片画到这个区域里

如果指定了 (dWidth,dHeight) ，因为它可能和 (sWidth,sHeight) 不一样

可能更小，也可能更大，可能更高，也可能更窄，那么就会涉及到图片的缩放问题

Canvas 只有一种缩放规则，那就是填满指定的区域 (dWidth,dHeight)

接下来我们看看 Canvas 提供的绘制图片的方法 drawImage()

Canvas drawImage() 方法

ctx.drawImage() 方法将一张图片绘制到画板上

语法

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

值	说明
image	绘制到画板的图像资源，可以是任何的 canvas 图像源 ( CanvasImageSource)，例如：HTMLImageElement，HTMLVideoElement，或者 HTMLCanvasElement
dx	绘制图像时起点的 X 轴位置
dy	绘制图像时起点的 Y 轴位置
dWidth	在目标画布上绘制图像的宽度。允许对绘制的图像进行缩放，如果不传递，绘制图像如果不说明，在绘制时图片宽度不会缩放
dHeight	在目标画布上绘制图像的高度。允许对绘制的图像进行缩放。如果不说明，在绘制时图片高度不会缩放
sx	截取图像时指定起点的 X 坐标
sy	截取图像时指定起点的 Y 坐标
sWidth	图像截取的高度
sHeight	图像截取的宽度

这些参数解释起来有点拗口，如果你看不明白，直接看图

范例

因为该方法有三种形式，那么我们就分三个范例来演示

1. 在画板的指定点绘制整张图片

下面的范例从画板的 (50,50) 开始绘制一整张图片

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300" style="border:1px solid #ccc">
</canvas>
<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
var img = document.createElement("img");

img.onload = function() {
    ctx.drawImage(this, 50, 50);
}
img.src = "https://www.twle.cn/static/i/meimei_160x160.png";
</script>

如果画布比图片小，比如画布的宽高为 100x100 那么多出来的图片会被裁掉(不显示)

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="100" height="100" style="border:1px solid #ccc">
</canvas>
<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
var img2 = 

img2.onload = function() {
    ctx.drawImage(this, 50, 50);
}
img2.src = "https://www.twle.cn/static/i/meimei_160x160.png";
</script>

在画板上指定位置和指定区域绘制整张图片

我们在画板的指定位置 (50,50) 和指定区域 (5,50) 绘制整张图片

注意图片的大小是 160x160,我们指定的区域要比图片小

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-3" width="300" height="200" style="border:1px solid #ccc">
</canvas>
<script>
var c   = document.getElementById("canvas-3");
var ctx = c.getContext("2d");
var img2 = 

img2.onload = function() {
    ctx.drawImage(this, 50, 50,50,50);
}
img2.src = "https://www.twle.cn/static/i/meimei_160x160.png";
</script>

大家看到没有，此时的图片会自己缩放到指定大小

如果我们指定的区域比例和原图不一样是什么情况呢？比如 (50,250)

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-4" width="300" height="300" style="border:1px solid #ccc">
</canvas>
<script>
var c   = document.getElementById("canvas-4");
var ctx = c.getContext("2d");
var img2 = 

img2.onload = function() {
    ctx.drawImage(this, 50, 50,50,250);
}
img2.src = "https://www.twle.cn/static/i/meimei_160x160.png";
</script>

可以看到图片被拉伸到填满区域了...类似的，如果宽度比较大，而高度比较小，就会水平拉伸

截取图片的一部分绘制到画板上的指定区域

下面的代码以距离图片左上角位置 (50,50) 截取宽高为 50x50 的部分图片绘制到画板上

绘制点为 (50,50)，绘制宽高为 (50,150)

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-5" width="300" height="200" style="border:1px solid #ccc">
</canvas>
<script>
var c   = document.getElementById("canvas-5");
var ctx = c.getContext("2d");
var img2 = 

img2.onload = function() {
    ctx.drawImage(this, 50,50,50,50,50,50,50,150);
}
img2.src = "https://www.twle.cn/static/i/meimei_160x160.png";
</script>

图片仍然被拉伸了

注意

在画板上绘制图片的时候绘制区域最好和图片大小相适应，不然会拉伸图片