帮忙看下代码是不是有问题,效果没实现。

jike_3816662 HTML5 Canvas 应用 最后由 yunkehe 于2016年09月14日回复

  • 6 回答
  • 2.1k 浏览

var canvas, 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: ["16.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.vY += 2;

s.vX += 1;

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.height){

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);

}

}

  • jike_1061195835 2016年07月25日 回答 #3楼
  • 我引入的easeljs-0.7.1.min.js怎么也不可以呢,按着视频核对了多次了

  • 0 评论
  • yunkehe 2016年09月14日 回答 #6楼
  • data{

    images: ["16.png"]

    }

    这里 16.png 默认是html文件所在路径,如果canvas.html 同级有个images文件夹,16.png在这个文件夹里,这里就应该填“images/16.png”。

  • 0 评论