Canvas 入门7 简单精灵创建
Posted 编程圈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Canvas 入门7 简单精灵创建相关的知识，希望对你有一定的参考价值。
本文学习资源来自《html5 Canvas核心技术 图形、动画与游戏开发》
精灵概述
要制作一个有用的精灵对象，必须让开发者能把它们绘制出来，能够将其放置于动画中的指定位置，并且能以给定的速度将其从一个地方移到另一个地方。精灵对象还可能接受命令，来执行某些特定的动作。
Sprite对象的属性
属性 | 描述 |
top | 精灵左上角Y |
left | 左上角x |
width | 宽 |
height | 高 |
velocityX | 水平速度 |
velocityY | 垂直速度 |
behaviors | 一个包含精灵行为对象的数组，在精灵执行更新逻辑时，该数组中的各行为对象都会被运用于此精灵 |
painter | 用于绘制此精灵对象的绘制器 |
visible | 是否可见 |
animating | 是否正在执行动画效果 |
Sprite构造器接受三个参数：名称、绘制器及行为数组。
精灵对象代码
<!DOCTYPE html>
<html>
<head>
<title>Sprite Balls</title>
<style>
body
background: #dddddd;
#canvas
margin-left: 10px;
margin-top: 10px;
background: #ffffff;
border: thin solid #aaaaaa;
</style>
</head>
<body>
<canvas id=canvas width=750 height=500>
Canvas not supported
</canvas>
<script>
var Sprite=function(name,painter,behaviors)
if(name!==undefined) this.name = name;
if(painter !== undefined) this.painter = painter;
this.top = 0;
this.left = 0;
this.width = 10;
this.height = 10;
this.velocityX = 0;
this.velocityY = 0;
this.visible = true;
this.animating = false;
this.behaviors = behaviors || [];
return this;
;
// Prototype..
Sprite.prototype=
paint:function(context)
if(this.painter !== undefined && this.visible)
this.painter.paint(this,context);
,
update:function(context,time)
for(var i =0;i<this.behaviors.length;++i)
this.behaviors[i].execute(this,context,time);
;
var context = document.getElementById(canvas).getContext(2d);
var RADIUS = 75,
ball=new Sprite(ball,
paint:function(sprite,context)
context.beginPath();
context.arc(sprite.left+sprite.width/2,
sprite.top+sprite.height/2,
RADIUS,0,Math.PI*2,false);
context.clip();
context.shadowColor=rgb(0,0,0);
context.shadowOffsetX=-4;
context.shadowOffsetY = -4;
context.shadowBlur = 8;
context.lineWidth = 2;
context.strokeStyle = rgb(100,100,195);
context.fillStyle = rgba(30,144,255,0.15);
context.fill();
context.stroke();
);
ball.left = 320;
ball.top = 160;
ball.paint(context);
</script>
</body>
</html>
代码中创建了一个名为ball的精灵对象，并在创建该对象时指定了一个自定义的绘制函数来绘制这个小球。
精灵绘制器
Sprite对象与绘制其内容的绘制器对象之间是解耦的(decoupled)，这样就可以在程序运行是为精灵对象动态地设定绘制器。
Painter对象只需要实现 void paint(sprite,context) 方法即可。所有Painter对象都可被归纳为以下三类：
- 描述及填充绘制器
- 图像绘制器
- 精灵表绘制器
搭边及填充绘制使用Canvas的图形API来绘制精灵，而图像绘制器则用于绘制图像。最后，精灵表绘制器用于绘制精灵表中的单个精灵。
绘制器是策略模式的一个使用实例。
以上是关于Canvas 入门7 简单精灵创建的主要内容，如果未能解决你的问题，请参考以下文章