canvas 实现微信小游戏

var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');

var timer;
var iStop = false;
var rotateSpeed = 0;
var endLines = [{'deg':0},{'deg':90},{'deg':180},{'deg':270}];
var runSpeed = 0;
var runLines = [{'x1':300,'y1':600, 'x2':300, 'y2':500, 'speed':0}];

function draw(){
cxt.save();
cxt.translate(300, 300);
cxt.rotate(rotateSpeed*Math.PI/180);
cxt.beginPath();
cxt.arc(0, 0, 50, 0, 360*Math.PI/180, false);
cxt.stroke();
cxt.closePath();

for(var i=0; i<endLines.length; i++){
cxt.save();
cxt.rotate(endLines[i].deg*Math.PI/180);
cxt.beginPath();
cxt.moveTo(50, 0);
cxt.lineTo(150, 0);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
cxt.restore();

for(var j=0; j<runLines.length; j++){
cxt.save();
cxt.beginPath();
cxt.moveTo(runLines[j].x1, runLines[j].y1);
cxt.lineTo(runLines[j].x2, runLines[j].y2);
cxt.stroke();
cxt.closePath();
cxt.restore();
}

var _runLines = [];
for(var k=0; k<runLines.length; k++){
if(runLines[k].y2 < 450){
for(var m=0; m<endLines.length; m++){
if((endLines[m].deg + rotateSpeed)%360 == 90){
iStop = true;
}
}
}
if(runLines[k].y2 == 350){
endLines.push({'deg':90-rotateSpeed});
}else{
runLines[k].y1 -= runLines[k].speed;
runLines[k].y2 -= runLines[k].speed;
_runLines.push(runLines[k]);
}
}
runLines = _runLines;

if((++rotateSpeed) == 360){
rotateSpeed = 0;
}

}

function erase(){
cxt.clearRect(0, 0, canvas.width, canvas.height);
}

document.onmousedown = function(){
runLines.push({'x1':300,'y1':600, 'x2':300, 'y2':500, 'speed':10});
};

window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;

window.cancelRequestAnimationFrame =
window.cancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame;

function animate() {
erase();
draw();
if(iStop){
cancelRequestAnimationFrame(timer);
}else{
timer = requestAnimationFrame(animate);
}
}

animate();