easeljs

问题 I'm having an issue where bitmaps seem to be loading after they are created and added to the stage. You can see all this code working right here. You can look at the console log for the log statements I'm getting (also shown below). I create the bitmaps in a function here (I know this code is working properly -- you don't have to read this but note how game.update is set to true at the end). for (i = -r; i <= r; i++){ var min = Math.max(-r, -r - i); var max = Math.min(r, r - i); for (j = min;

问题 In this example: var canvas = document.getElementById("testCanvas"); var stage = new createjs.Stage(canvas); function drawRectangle(){ var rect = new createjs.Shape(); rect.graphics.beginFill("#000").drawRect(10, 10, 100, 100); stage.addChild(rect); } function drawShapes(){ drawRectangle(); stage.update(); } drawShapes(); // Why does this call log null? console.log(stage.getBounds()); <script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js"></script> <canvas id=

问题 I'm building a game using canvas and EaselJS but there is an issue when doing anything inside an onclick that removes window focus, ie. prompt, alert, window.open. It happens in FireFox and on some mobile Android devices from what i've seen. I think I understand why it is but I don't know how to fix it ( I didn't know how to explain in one sentence, so the title of this Question is not entirely true ) If I have an alert within an onclick like so _t.container.on('click', function(e) { alert(

问题 I'm having an hard time working with EaselJS. Basically I want to create a simple grid and highlight the actual element selected: var stageWidth = 800, stageHeight = 600, cell_size = 50, w = 16, h = 12, n = w * h, canvas, stage, background; $(document).ready(function(){ canvas = $("#container")[0]; stage = new createjs.Stage(canvas); var x_pos = 0, y_pos = 0, res = 0, grid_el; for(i=0;i<n;i++){ res = i%w; if(i>0){ if(res===0){ x_pos = 0; y_pos++; } else { x_pos++; } } grid_el = new createjs

问题 I've got a gradient like so: var graphic = new createjs.Graphics().beginLinearGradientFill( ["#000", "#fff", "#000"], [0, 0.5, 1], 0, 0, window.innerWidth, window.innerHeight ).drawRect(0, 0, window.innerWidth, window.innerHeight); var shape = new createjs.Shape(graphic); How would I animate the gradient so that it appears to be moving? (i.e. if this were CSS-made, the background-position would slowly change) 回答1: Unfortunately Canvas gradients are not as simple to animate as CSS. You have to

问题 I'm trying to make an event that changes my shapes stroke color for 5 seconds when a button is clicked, and then the shape returns to original color after the duration. I am able to do this with clearing the entire stage and redrawing new shapes (which resets their position), but I can't figure it out with the current shapes. Q. What's the best way to approach making a change to a shapes color, during a Tween? I was also curious if there's a better way to handling tweening the shapes width?

问题 I switched over to EaselJS after having muleheadedly implemented all mouse and vector related information in the HTML canvas element. I have gotten used to EaselJS and it is really neat. I especially like the containers and how simple they make drawing embedded shapes. However, I can't figure out how you, for example, implement a color change of a shape on a mouse over. Anything as simple as a rectangle changing color from red to green. Am I supposed to remove the shape from its container and

问题 I'm making a rotating rectangle with EaselJS but it doesn't work like I thought. As I think, if I want to make a square (40x40) which rotates around its center at position x=100, y=100, I will need to set it's registration point to regX=20, regY=20. //Create a stage by getting a reference to the canvas stage = new createjs.Stage("demoCanvas"); //Create a Shape DisplayObject. circle = new createjs.Shape(); circle.graphics.beginFill("red").drawRect(100, 100, 40, 40); circle.regX = circle.regY =

问题 Pretty simple concept but it doesn't seem to be working. Here is my code: stage.clear(); stage.update(); Simple stuff -- nothing happens. The docs aren't helping. 回答1: This ended up working for me: stage.removeAllChildren(); stage.update(); 回答2: if you have just one child of shape on that stage and dont want use removeallchildren, you can do this: myshape.graphics.clear(); stage.update(); if more than one, then loop its children. 来源： https://stackoverflow.com/questions/13056076/easel-js-stage

问题 I have simple animation created using create js and ffmpegserver.js. ffmpegserver.js. This is a simple node server and library that sends canvas frames to the server and uses FFmpeg to compress the video. It can be used standalone or with CCapture.js. Here is repo: video rendering demo. on folder public, I have demos eg test3.html and test3.js Test3.html <!DOCTYPE html> <html> <head> <title>TweenJS: Simple Tween Demo</title> <style> canvas { border: 1px solid #08bf31; justify-content: center;