2.4.1 利用drawImage绘制图片_H5之家 - 中国HTML5教程资源分享第一站

> 其他综合 > HTML5 Canvas游戏开发实战 2.4.1　利用drawImage绘制图片 2013-04-07 10:07:56 我要投稿

本文所属图书 > HTML5 Canvas游戏开发实战

本书主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧，在介绍HTML5 Canvas相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。在本书中，除了介绍了... 立即去当当网订购

2.4　图片操作

无论我们开发的是应用程序还是游戏软件，都是离不开图片，没有图片就无法让整个页面漂亮起来。开发游戏的时候，游戏中的地图、背景、人物、物品等都是由图片组成的，所以图片的显示和操作非常重要。Canvas中提供了drawImage函数和putImageData函数来绘制图片，在本节中将一一讲解。

2.4.1　利用drawImage绘制图片

drawImage函数有3种函数原型，其语法如下：
drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

第一个参数image是要绘制的对象，这个参数可以是HTMLImageElement、HTML-CanvasElement或者HTMLVideoElement，dx、dy是image在Canvas中定位的坐标值，dw、dh表示image在Canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值，sx、sy是image所要绘制的起始位置，sw、sh表示image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。

关于第一个参数，我们先使用HTML的<img>标签来得到将要绘制的图片的数据。首先准备一张图片face.jpg，然后看代码清单2-23。

代码清单　2-23
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
img标签<br />
<img id="face" src="face.jpg" alt="The Face" width="240" height="240" /><br />
canvas画板<br />
<canvas id="myCanvas" width="500" height="350">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var img=document.getElementById("face");
ctx.drawImage(img,10,10);
</script>
</body>
</html>

代码解析

首先在html中加入<img>标签。
<img id="face" src="face.jpg" alt="The Face" width="240" height="240" /><br />

然后在Canvas中通过<img>标签的id取得图片数据。
var img=document.getElementById("face");

最后用drawImage函数将图片绘制到画板上。
ctx.drawImage(img,10,10);

运行效果如图2-26所示。

上面的代码是通过<img>标签来获取的，我们也可以通过JavaScript的Image对象来获取。具体使用方法如代码清单2-24所示。

代码清单　2-24
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("face");
img.onload = function(){
   ctx.drawImage(img,10,10);
};
</script>

代码解析

首先建立Image对象。
var image = new Image();

然后通过设置src属性，来载入图片。
image.src = "face.jpg";

接着添加onload事件侦听，当图片载入完成时将其绘制到画板上。
image.onload = function(){
ctx.drawImage(image,10,10);
};

运行效果如图2-27所示。

下面具体看一下drawImage函数的3种函数原型的用法与区别，如代码清单2-25所示。

代码清单　2-25
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var image = new Image();
image.src = "face.jpg";
image.onload = function(){
   ctx.drawImage(image,10,10);
   ctx.drawImage(image,260,10,100,100);
   ctx.drawImage(image,50,50,100,100,260,130,100,100);
};
</script>

代码解析

下面的代码表示从坐标(10,10)开始绘制整张图片。
ctx.drawImage(image,10,10);

下面的代码表示从坐标(260,10)开始绘制整张图片到长100、宽100的矩形区域内。
ctx.drawImage(image,260,10,100,100);

下面的代码表示截取图片从 (50,50)到(100,100)的部分，从坐标(260,130)开始绘制，放到长100、宽100的矩形区域内。
ctx.drawImage(image,50,50,100,100,260,130,100,100);

运行效果如图2-28所示。

点击复制链接与好友分享!回本站首页您对本文章有什么意见或着疑问吗？请到论坛讨论您的关注和建议是我们前行的参考和动力上一篇：2.3.3　文字的对齐方式下一篇：2.4.2　利用getImageData和putImageData绘制图片相关文章

2.4.1 关键字

12.4.1 创建随机颜色

2.4.1 可靠密码输入的困难

2.4.1　从逻辑模型到物理模型

2.4.1 服务器检查

2.4.1 调制解调器的分类

2.4.1 WinPcap的主要组成

2.4.1 日期和时间的本质

2.4.1 OS分区

2.4.1 隐性循环体依赖

图文推荐

排行热门