使用Canvas制作炫酷的效果(视频)

jike_0119851 HTML5 Canvas 应用 最后由 jike_1552575 于2016年12月07日回复

  • 3 回答
  • 1.7k 浏览

按照视频中的代码,但是却没有效果。这是为什么?(实现的是随着鼠标的移动和点击,会跟随出现指定的图片效果)

apps.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:["star.jpeg"],
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;
  • jike_0119851 2016年01月13日 回答 #2楼
  • #1楼  @arjinmc 引用了啊

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="easeljs-0.8.2.min.js"></script>
    </head>
    <body>
    <canvas id="canvas" width="1000" height="500"></canvas>
    <script src="apps.js"></script>
    </body>
    </html>
  • 0 评论
  • jike_1552575 2016年12月07日 回答 #3楼
  • 朋友你这2个方法需要自己写的,clickCanvas,moveCanvas,请参考第二节课

  • 0 评论