有没有大神分享一下完整版代码的？菜鸟求帮助！！！图片一直显示在左下角，并且报错ane.js，提示Uncaught TypeError: Object #<CanvasRenderingContext2D> has no method 'LineTO' 。
我靠，复制上去肿么成这鬼样子了。。。。
var can1;
var can2;
var ctx1,ctx2;
var lastTime;
var deltaTime;
var mx,my;
var bgpic=new Image();
$(function(){
init();
lastTime=Date.now();
deltaTime=0;
gameloop();
});
function init(){
can1=document.getElementById('cs1');
can2=document.getElementById('cs2');
ctx1=can1.getContext('2d');
ctx2=can2.getContext('2d');
can1.addEventListener('mousemove',onMouseMove,false);
bgpic.src='./img/background.jpg';
aneObj.init();
fruit.init();
dayu.init();
xiaoyu.init();
mx=can1.width/2;
my=can1.height/2;
}
function gameloop(){
window.requestAnimationFrame(gameloop);
var now=Date.now();
deltaTime=(now-lastTime>20?18:now-lastTime);
lastTime=now;
ctx2.drawImage(bgpic,0,0,can1.width,can1.height);
aneObj.draw();
fruit.draw();
fruit.fruitMonitor();
ctx1.clearRect(0,0,can1.width,can1.height);
dayu.draw();
xiaoyu.draw();
chi.chile();
}
function onMouseMove(e){
if(e.offSetX||e.layerX){
mx=e.offSetX==undefined?e.layerX:e.offSetX;
my=e.offSetY==undefined?e.layerY:e.offSetY;
}
}
window.aneObj={
param:{
x:[],
len:[],
num:50
},
init:function(){
for(i=0;i<aneObj.param.num;i++){
aneObj.param.x[i]=i*16+Math.random()*20;
aneObj.param.len[i]=200+Math.random()*50;
}
},
draw:function(){
ctx2.save();
ctx2.globalAlpha=0.6;
ctx2.lineWidth=20;
ctx2.lineCap="round";
ctx2.strokeStyle="#3b154e";
for(i=0;i<aneObj.param.num;i++){
ctx2.beginPath();
ctx2.moveTo(aneObj.param.x[i],can1.height);
ctx2.lineTo(aneObj.param.x[i],can1.height-aneObj.param.len[i]);
ctx2.stroke();
}
ctx2.restore();
}
}
window.fruit={
param:{
alive:[],
x:[],
y:[],
spd:[],
l:[],
max:[],
orange:new Image(),
blue:new Image(),
num:30,
thisImg:[]
},
init:function(){
for(i=0;i<fruit.param.num;i++){
fruit.param.alive[i]=false;
fruit.param.x[i]=0;
fruit.param.y[i]=0;
fruit.param.spd[i]=Math.random()*0.017+0.003;
fruit.param.max[i]=Math.random()*21;
fruit.param.thisImg[i]=new Image();
for(;true;){
if(fruit.param.max[i]<10){
fruit.param.max[i]=Math.random()*21;
}else{
break;
}
}
}
fruit.param.orange.src='./img/fruit.png';
fruit.param.blue.src='./img/blue.png';
},
draw:function(){
for(i=0;i<fruit.param.num;i++){
if(fruit.param.alive[i]){
if(fruit.param.l[i]<=fruit.param.max[i]){
fruit.param.l[i]+=fruit.param.spd[i]*deltaTime;
}else{
fruit.param.y[i]-=fruit.param.spd[i]*7*deltaTime;
}
ctx2.drawImage(fruit.param.thisImg[i],fruit.param.x[i]-fruit.param.l[i]/2,fruit.param.y[i]-fruit.param.l[i]/2,fruit.param.l[i],fruit.param.l[i]);
if(fruit.param.y[i]<0){
fruit.param.alive[i]=false;
}
}
}
},
born:function(i){
fruit.param.thisImg[i].src=Math.random()>0.1?fruit.param.orange.src:fruit.param.blue.src;
var aneObjid=Math.floor(Math.random()*aneObj.param.num);
fruit.param.x[i]=aneObj.param.x[aneObjid];
fruit.param.y[i]=can1.height-aneObj.param.len[aneObjid];
fruit.param.l[i]=0;
fruit.param.alive[i]=true;
},
fruitMonitor:function(){
var num=0;
for(i=0;i<fruit.param.num;i++){
if(fruit.param.alive[i]){
num++;
}
}
if(num<15){
fruit.sendFruit()
return;
}
},
sendFruit:function(){
for(i=0;i<fruit.param.num;i++){
if(!fruit.param.alive[i]){
fruit.born(i);
return;
}
}
}
}
window.dayu={
param:{
x:0,
y:0,
bigEye:new Image(),
bigBody:new Image(),
bigTail:new Image(),
angle:0
},
init:function(){
dayu.param.x=can1.width/2;
dayu.param.y=can1.height/2;
dayu.param.bigEye.src='./img/bigEye0.png';
dayu.param.bigBody.src='./img/bigSwim0.png';
dayu.param.bigTail.src='./img/bigTail0.png';
},
draw:function(){
dayu.param.x=lerpDistance(mx,dayu.param.x,0.98);
dayu.param.y=lerpDistance(my,dayu.param.y,0.99);
var daltaY=my-dayu.param.y;
var daltaX=mx-dayu.param.x;
var beta=Math.atan2(daltaY,daltaX)+Math.PI;
dayu.param.angle=lerpAngle(beta,dayu.param.angle,0.6);
ctx1.save();
ctx1.translate(dayu.param.x,dayu.param.y);
ctx1.rotate(dayu.param.angle);
ctx1.drawImage(dayu.param.bigBody,-dayu.param.bigBody.width/2,-dayu.param.bigBody.height/2);
ctx1.drawImage(dayu.param.bigTail,-dayu.param.bigTail.width/2+30,-dayu.param.bigTail.height/2);
ctx1.drawImage(dayu.param.bigEye,-dayu.param.bigEye.width/2,-dayu.param.bigEye.height/2);
ctx1.restore();
}
}
window.xiaoyu={
param:{
x:0,
y:0,
bigEye:new Image(),
bigBody:new Image(),
bigTail:new Image(),
angle:0
},
init:function(){
xiaoyu.param.x=can1.width/2-50;
xiaoyu.param.y=can1.height/2+50;
xiaoyu.param.bigEye.src='./img/babyEye0.png';
xiaoyu.param.bigBody.src='./img/babyFade0.png';
xiaoyu.param.bigTail.src='./img/babyTail0.png';
},
draw:function(){
xiaoyu.param.x=lerpDistance(dayu.param.x,xiaoyu.param.x,0.99);
xiaoyu.param.y=lerpDistance(dayu.param.y,xiaoyu.param.y,0.99);
var daltaY=dayu.param.y-xiaoyu.param.y;
var daltaX=dayu.param.x-xiaoyu.param.x;
var beta=Math.atan2(daltaY,daltaX)+Math.PI;
xiaoyu.param.angle=lerpAngle(beta,xiaoyu.param.angle,0.6);
ctx1.save();
ctx1.translate(xiaoyu.param.x,xiaoyu.param.y);
ctx1.rotate(xiaoyu.param.angle);
ctx1.drawImage(xiaoyu.param.bigBody,-xiaoyu.param.bigBody.width/2,-xiaoyu.param.bigBody.height/2);
ctx1.drawImage(xiaoyu.param.bigTail,-xiaoyu.param.bigTail.width/2+25,-xiaoyu.param.bigTail.height/2);
ctx1.drawImage(xiaoyu.param.bigEye,-xiaoyu.param.bigEye.width/2,-xiaoyu.param.bigEye.height/2);
ctx1.restore();
}
}
window.chi={
chile:function(){
for(i=0;i<fruit.param.num;i++){
if(fruit.param.alive[i]){
var l=calLength2(fruit.param.x[i],fruit.param.y[i],dayu.param.x,dayu.param.y);
if(l<900){
fruit.param.alive[i]=false;
}
}
}
}
}
//放一个文件中就可以了应该是lineTo把