"Image"ReferenceError: Image is not defined

jike_9683658 HTML5 Canvas 应用 最后由 jike_9683658 于2016年12月20日回复

  • 1 回答
  • 2.9k 浏览

appss.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;data = {images:["star.png"],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_9683658 2016年12月20日 回答 #1楼
  • frames: {width: 20, height: 20, regX: 10, regY: 10}

    这句代码的意思是图片的大小必须是20*20的吗??

    看来不是代码错了,是图片太大了。只显示了图片20*20的那一部分。

    白色的图片看不到效果!!!

    如果把图片的背景改成比如红色的,就会看到一个20*20的红色方块了!

    那个后面的变化区域又怎么理解呢??中心点变化区域10*10

    希望老师能详细讲一下。。

  • 1 评论