6.1_精灵概述
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精灵概述</title>
<style>
body{
background: #ddd;
}
#canvas{
background: #fff;
cursor: pointer;
margin-left: 10px;
margin-top: 10px;
-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvas id="canvas" width="750" height="500"></canvas>
</body>
<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 || [];
}
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);
}
}
}
</script>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var radius = 75;
var ball = new Sprite('ball',{
paint:function(sprite,context){
context.beginPath();
context.arc(sprite.left + sprite.width/2,
sprite.top+sprite.height/2,
radius,0,2*Math.PI,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();
}
}
);
drawGrid('lightgray',10,10);
ball.left = 320;
ball.top = 160;
ball.paint(context);
function drawGrid(color, stepX, stepY) {
context.save();
context.shadowColor = undefined;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 0;
context.strokeStyle = color;
context.lineWidth = 0.5;
context.fillStyle = '#fff';
context.fillRect(0, 0, canvas.width, canvas.height);
for(var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
context.stroke();
}
for(var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
}
context.restore();
}
</script>
</html>