JSDM

HTML

2
 
1
div
2
  canvas#myCanvas
!

CSS

xxxxxxxxxx
4
 
1
body
2
  background-color rgba(255,165,0,.2)
3
canvas
4
  height 800px
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

66
 
1
var canvas; 
2
var stage;
3
var sprite;
4
(function(){
5
  canvas = document.getElementById("myCanvas");
6
  stage = new createjs.Stage(canvas);
7
  
8
  stage.addEventListener("stagemousedown",mouseDown);
9
  stage.addEventListener("stagemousemove",mouseMove);
10
  
11
  var data={
12
    images:["http://ico.ooopic.com/ajax/iconpng/?id=94830.png"],
13
    frames:{width:128,height:128}
14
  };
15
  var spriteSheet = new createjs.SpriteSheet(data);
16
  sprite = new createjs.Sprite(spriteSheet);
17
  
18
  createjs.Ticker.setFPS(20);
19
  createjs.Ticker.addEventListener("tick",handleTick);
20
})()
21
function handleTick(event){
22
  var t = stage.getNumChildren();
23
  for(var i = t-1;i>0;i--){   
24
    var s = stage.getChildAt(i);
25
    //after
26
    s.vX +=1;
27
    s.vY +=2;
28
    s.x += s.vX;
29
    s.y += s.vY;
30
    s.vS = (Math.random() -0.5)*0.05; 
31
    s.vA = -Math.random() *0.05 -0.01;
32
    s.scaleX = s.scaleY =s.scaleX+ s.vS;
33
    s.alpha += s.vA;
34
    //delete element
35
    if(s.alpha <= 0 || s.y >canvas.height || s.x >canvas.width){    
36
      stage.removeChildAt(i);
37
    }
38
  }
39
  stage.update(event);
40
}
41
42
function mouseDown(event){
43
  global(Math.random()*100 + 50,stage.mouseX,stage.mouseY,2);
44
}
45
46
function mouseMove(event){
47
  global(Math.random(),stage.mouseX,stage.mouseY,1);
48
}
49
50
function global(sum,x,y,speed){
51
  for(var i = 0;i<sum;i++){
52
    var s = sprite.clone();
53
    //prototype
54
    s.x = x;
55
    s.y = y;
56
    s.alpha = Math.random()*0.5 + 0.5;
57
    s.scaleX = s.scaleY = Math.random()*0.5;
58
    //transform
59
    var a = Math.PI * 2 *Math.random();
60
    var v = (Math.random() - 0.5) *30 *speed;
61
    s.vX = Math.cos(a) *v;
62
    s.vY = Math.sin(a) *v;
63
    //add to canvas
64
    stage.addChild(s);
65
  }
66
}
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................