Canvas 绘制图像 drawImage()

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

浏览器支持的任意格式的外部图片都可以使用,比如 PNGGIF 或者 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=0sWidth=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>

图片仍然被拉伸了

注意

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

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.