《HTML5 Canvas游戏开发实战》——2.4　图片操作

最新推荐文章于 2022-10-31 19:54:11 发布

weixin_33943836

最新推荐文章于 2022-10-31 19:54:11 发布

阅读量163

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/173648

版权

本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第2章，第2.4节,作者：张路斌著，更多章节内容可以访问云栖社区“华章计算机”公众号查看。

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的标签来得到将要绘制的图片的数据。首先准备一张图片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 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所示。
上面的代码是通过标签来获取的，我们也可以通过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.4.2　利用getImageData和putImageData绘制图片
将图片绘制到Canvas画板上还有另一种方法，就是使用putImageData(imgdata,dx,dy,sx,sy,sw,sh)函数。putImageData函数有7个参数，其中imgdata为像素数据，dx、dy是绘制图片的定位坐标值， sx、sy是imgdata所要绘制图片的起始位置，sw、sh是imgdata所要绘制区域（相对imgdata的sx和sy坐标的偏移量）的宽度和高度值。值得一提的是，这里面第4个参数以及其后的所有参数都可以省略，如果这些参数都省略了，则表示绘制整个imgdata。
在使用putImageData函数前，需要先用getImageData(x,y,w,h)函数得到像素数据，这里指的是从Canvas画板上取得所选区域的像素数据，它的4个参数分别是选择区域起点的坐标x和坐标y，选择区域的长和宽。putImageData(imgdata,dx,dy,x,y,w,h)函数则表示将所得到的像素数据描画到Canvas画板上形成图形。
下面是putImageData函数的使用过程，如代码清单2-26所示。
代码清单　2-26

<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);  
    var imgData=ctx.getImageData(50,50,200,200);
    ctx.putImageData(imgData,10,260); 
     ctx.putImageData(imgData,200,260,50,50,100,100);
};    
</script>

代码解析
图片数据读取完成后，首先将图片数据绘制到Canvas画板上。

ctx.drawImage(image,10,10);

然后用getImageData函数从画板上取得像素数据。

var imgData=ctx.getImageData(50,50,200,200);

将所取得的整个像素数据画到Canvas画板上。

ctx.putImageData(imgData,10,260);

将所取得的像素数据的一部分画到Canvas画板上。

ctx.putImageData(imgData,200,260,50,50,100,100);

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

注意　代码清单2-26中使用了getImageData函数获取图片数据,此函数在Google Chrome等浏览器中会涉及跨域问题，所以无法直接在浏览器中浏览，必须通过服务器来访问。我们在第1章配置环境的时候已经安装了本地服务器，参照1.5节的内容，将本地的代码文件放到本地服务器上，就可以看到测试结果了。以后凡是用到getImageData函数的地方，一定要使用此方法进行测试，此处不赘述。
2.4.3　利用createImageData新建像素
createImageData函数有两种函数原型，其语法分别如下所示：
createImageData(sw, sh);
其一，返回指定大小的imageData对象。
createImageData(imagedata);
其二，返回与指定对象相同大小的imageData对象。
首先需要知道的是，通过createImageData返回的是一个空的imageData对象，必须要针对其像素进行赋值才能显示到Canvas画板上。下面我们通过例子来看看这两种原型的使用方法与区别，如代码清单2-27所示。
代码清单　2-27

<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);  
    var imgData=ctx.getImageData(50,50,200,200);
    
    var imgData01=ctx.createImageData(imgData);
    for (i=0; i<imgData01.width*imgData01.height*4;i+=4){
        imgData01.data[i+0]=255;
        imgData01.data[i+1]=0;
        imgData01.data[i+2]=0;
        imgData01.data[i+3]=255;
    }
    ctx.putImageData(imgData01,10,260); 
    
    var imgData02=ctx.createImageData(100,100);
    for (i=0; i<imgData02.width*imgData02.height*4;i+=4){
        imgData02.data[i+0]=255;
        imgData02.data[i+1]=0;
        imgData02.data[i+2]=0;
        imgData02.data[i+3]=155;
    }
    ctx.putImageData(imgData02,220,260); 
};    
</script>

代码解析
图片数据读取完成后，首先将图片数据绘制到Canvas画板上。

ctx.drawImage(image,10,10);

然后用getImageData函数从画板上取得像素数据。

var imgData=ctx.getImageData(50,50,200,200);

使用createImageData返回与imgData相同大小的ImageData对象。

var imgData01=ctx.createImageData(imgData);

下面imgData01进行赋值。

for (i=0; i<imgData01.width*imgData01.height*4;i+=4){
    imgData01.data[i+0]=255;
    imgData01.data[i+1]=0;
    imgData01.data[i+2]=0;
    imgData01.data[i+3]=255;
}

利用putImageData将imgData01画到Canvas画板上。

ctx.putImageData(imgData01,10,260);

使用createImageData返回一个大小为100×100的ImageData对象。

var imgData02=ctx.createImageData(100,100);

对imgData02进行赋值。

for (i=0; i<imgData02.width*imgData02.height*4;i+=4){
    imgData02.data[i+0]=255;
    imgData02.data[i+1]=0;
    imgData02.data[i+2]=0;
    imgData02.data[i+3]=155;
}

利用putImageData将imgData02画到Canvas画板上。