今天有看到一个一个挺好用的鼠标事件，就是鼠标移动或者点击时会有很多小星星散出来，就跟着敲了一下代码，但是完了发现界面不显示，哪路大神给我指点一下，谢谢
<body >
<script src="easeljs-0.8.2.min.js"></script>
<canvas id="canvas" width=1000px height=500px></canvas>
<script src="mouse.js"></script>
</body>
这里边的easeljs-0.8.2.min.js是引用的createjs中的文件
js代码部分：
mouse.js:
var canvas;
var stage;
var img=new Image();
var sprite;
window.onload=function(){
canvas=document.getElementById("canvas");
stage=new createjs.Stage(canvas);
stage.addEventListener("stagemousedown",clickCanvas);
stage.addEventListener("stagemousemove",moveCanvas);
var data={
images:["0.jpg"].
frames:{width:20,height:20,regX:10,regY:10}
}
sprite=new createjs.Sprite(new createjs.SpriteSheet(data));
createjs.Ticker.setFPS(20);
createjs.Ticker.addEventListener("tick",tick);
}
function tick(e){
var t=stage.getNumChildren();
for(var i=t-1;i>0;i--){
var s=stage.getChildAt(i);
s.vX +=1;
s.vY +=2;
s.x +=s.vX;
s.y +=s.vY;
s.scaleX =s.scaleY=s.scaleX+s.vS;
s.alpha +=s.vA;
if(s.alpha<=0||s.y>canvas.hieght){
stage.removeChildAt(i);
}
}
stage.update(e);
}
function clickCanvas(e){
addS(Math.random()*200+100,stage.mouseX,stage.mouseY,2);
}
function moveCanvas(e){
addS(Math.random()*2+1,stage.mouseX,stage.mouseY,1);
}
function addS(count,x,y,speed){
for(var i=0;i<count;i++){
var s=sprite.clone();
s.x=x;
s.y=y;
s.alpha=Math.random()*0.5+0.5;
s.scaleX=s.scaleY=Math.random()+0.3;
var a=Math.PI*2*Math.random();
var v=(Math.random()-0.5)*30*speed;
s.vX=Math.cos(a)*v;
s.vY=Math.sin(a)*v;
s.vS=(Math.random()-0.5)*0.2;//scale
s.vA=-Math.random()*0.05-0.01;//alpha
stage.addChild(s);
}
} |
|
收藏
淘帖
踩
