AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
?首页?>?html游戏

html游戏编程如何使用图像?

51自学网 http://www.51zixue.net

?如何使用图像?

要在画布上添加图像,getContext(“2d”)对象具有内置的图像属性和方法。
?
在我们的游戏中,为了创建gamepiece作为一个图像,可以使用组件构造函数,而不是引用颜色,你必须参考图像的url。 你必须告诉构造函数这个组件的类型是“image”:

Example

function?startGame() {
? myGamePiece =?new?component(30,?30,?"smiley.gif",?10,?120,?"image");
? myGameArea.start();
}

在组件构造函数中,我们测试组件是否为“image”类型,并通过使用内置的“新Image()”对象构造函数创建一个图像对象。 当我们准备绘制图像时,我们使用drawImage方法而不是fillRect方法:

Example

function?component(width, height, color, x, y, type) {
? this.type = type;
??if?(type ==?"image") {
??? this.image =?new?Image();
??? this.image.src = color;
? }
? this.width = width;
? this.height = height;
? this.speedX =?0;
? this.speedY =?0;?
? this.x = x;
? this.y = y;?
? this.update =?function() {
??? ctx = myGameArea.context;
????if?(type ==?"image") {
????? ctx.drawImage(this.image,?
??????? this.x,?
??????? this.y,
??????? this.width, this.height);
??? }?else?{
????? ctx.fillStyle = color;
????? ctx.fillRect(this.x, this.y, this.width, this.height);
??? }
? }
}
完整源代码

?

?
?

?

组件构造函数使用内置的图像对象将图像绘制到画布上。.


查看效果>>

 
上一篇:html教程之游戏中设置分数? 下一篇:html游戏-变换图像