[学习交流] 【上海校区】HTML5 canvas中如何绘制图像

canvas是HTML5中新增的画布，那么HTML5 canvas如何绘制图像呢？本篇文章就来给大家介绍关于HTML5 canvas绘制图像的方法，下面我们来看具体的内容。

我们先来直接看代码示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

<head>

function draw() {

var canvas = document.getElementById('SimpleCanvas');

if (!canvas || !canvas.getContext) {

return false;

}

var context = canvas.getContext('2d');

var img = new Image();

img.onload = function onImageLoad() {

context.drawImage(img, 128, 40);

}

img.src = 'img/flower.jpg';

}

</script>

</head>

<div>Canvas Demo</div>

</body>

</html>

说明：在画布上绘图时，获取画布的上下文是一个常见的过程。

准备要在画布上绘制的图像。创建一个Image对象。

1	var img = new Image();

在画布上绘制图像使用Canvas上下文的drawImage（）方法。给出X和Y坐标以将Image对象绘制为第一个参数，将图像绘制为第二个第三个参数，由于加载Image对象的图像是异步处理的，因此必须在Image对象的图像准备好的情况下绘制图像。因此，我们对Image对象的onload事件实现绘图处理，最后处理源图像的设置

1

2

3

4

img.onload = function onImageLoad() {

context.drawImage(img, 128, 40);

}

img.src = 'img/flower.jpg';

运行结果

在Web浏览器中打开HTML文件。结果如下图所示，图像是在画布上绘制的。

注意：在以下代码的情况下，不能保证在执行drawImage时读取Image对象的图像。因此，可能在显示图像时发生。绘制图像应该在Image对象的onload上实现。

1

2

3

4

5

6

7

8

9

10

11

12

13

function draw() {

var canvas = document.getElementById('SimpleCanvas');

if (!canvas || !canvas.getContext) {

return false;

}

var context = canvas.getContext('2d');

var img = new Image();

img.src = 'img/flower.jpg';

context.drawImage(img, 128, 40);

}

</script>

【转载】仅作分享，侵删
链接：http://www.php.cn/html5-tutorial-413504.html

梦缠绕的时候 · 梦缠绕的时候

不二晨 · 不二晨

小影姐姐 · 小影姐姐

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】HTML5 canvas中如何绘制图像

3 个回复