javascript - Add class to canvas element HTML5 & CreateJS - Stack Overflow

admin管理员组

文章数量:1304148

I am generating 5 circles with a for loop in a canvas and I want to give them a class so I can control them with jquery, but I am doing something wrong. Can you guys figure out what's happening?

var stage;
var quantity = 6,
    width = 60,
    height = 60,
    circles = [];

function init(){
    stage = new createjs.Stage("myCanvas");
    stage.width = 500;
    stage.height = 600;
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", onTick);
    setupGame();
}

function setupGame() {
    for(var i = 0; i < quantity; i++) {   
         var circle = document.createElement("img");
         circle.setAttribute('src', 'images/circles/circle'+i+'.png');
         circle.className = "circle";
         circle.style.position = "absolute";
         circle.style.left = Math.floor((Math.random() * 100)) + "%";
         circle.style.top = Math.floor((Math.random() * 100)) + "%";
         circle.style.width = width + "px";
         circle.style.height = height + "px";
         document.body.appendChild(circle);
         circles.push(circle);
    }
}

function onTick(e){
    stage.update(e);
}

NEW VERSION. With the help from JonnyD, I now have a functional loop. The only problem is that the images get appended to the body, and not to my stage. I have tried stage.appendChild(circle), but it's not working.

Here is a link to an online source so you guys can check it out = LINK

I am generating 5 circles with a for loop in a canvas and I want to give them a class so I can control them with jquery, but I am doing something wrong. Can you guys figure out what's happening?

var stage;
var quantity = 6,
    width = 60,
    height = 60,
    circles = [];

function init(){
    stage = new createjs.Stage("myCanvas");
    stage.width = 500;
    stage.height = 600;
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", onTick);
    setupGame();
}

function setupGame() {
    for(var i = 0; i < quantity; i++) {   
         var circle = document.createElement("img");
         circle.setAttribute('src', 'images/circles/circle'+i+'.png');
         circle.className = "circle";
         circle.style.position = "absolute";
         circle.style.left = Math.floor((Math.random() * 100)) + "%";
         circle.style.top = Math.floor((Math.random() * 100)) + "%";
         circle.style.width = width + "px";
         circle.style.height = height + "px";
         document.body.appendChild(circle);
         circles.push(circle);
    }
}

function onTick(e){
    stage.update(e);
}

NEW VERSION. With the help from JonnyD, I now have a functional loop. The only problem is that the images get appended to the body, and not to my stage. I have tried stage.appendChild(circle), but it's not working.

Here is a link to an online source so you guys can check it out = LINK

• javascript
• jquery
• html
• canvas
• createjs

Share Improve this question Follow edited Jan 14, 2015 at 15:15 SimeriaIonut asked Jan 14, 2015 at 12:51 SimeriaIonutSimeriaIonut 58622 gold badges1111 silver badges2222 bronze badges 4

• Sure, i added an online link to the project. – SimeriaIonut Commented Jan 14, 2015 at 13:01
• 4 circles aren't DOM objects, you should use methods relative to createjs library instead. You should read the DOC and see, unfortunately, i cannot help you more on this – A. Wolff Commented Jan 14, 2015 at 13:01
• Actually what I am trying to achieve is to be able to change the background position of the images/circles (they are png's) through css 3 seconds after they are rendered. But I first tried simpler things like hiding and showing them. Any ideas? – SimeriaIonut Commented Jan 14, 2015 at 13:04
• You may achieve using jCanvas layers (using "name" as ID and "groups" as classes) – nicolallias Commented Jan 14, 2015 at 16:05

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

A lot is wrong with your code.

You are trying to add properties to strings within an array which is not possible. Properties are added to objects using dot or bracket notation..

Dot notation

foo.bar.baz

Square bracket notation

foo['bar']['baz']

What I think you want to do is create five circles on the 'screen' or more technically correct DOM (https://developer.mozilla/en-US/docs/Web/API/Document_Object_Model) at random positions with set H&W of 60px with classnames of myClass..

I have rewritten your code for you, you can remove the style javascript lines and add them in the CSS if you wish.. All you were really doing wrong was attempting to add properties to array values, wrong technique for the code and missing off .style before width, height. Note You add className's and width and height attributes to DOM elements only.

You can now access the individual circles through a for loop and the circles array or by using the nth-child selector with CSS. e.g .circle:nth-child(1) {animation/transition}

var quantity = 5,
    width = 60,
    height = 60
    circles = [];

function setUp() {
    for(var i = 0; i < quantity; i++) {   
         var circle = document.createElement("div");
         circle.className = "circle";
         circle.style.position = "absolute";
         circle.style.left = Math.floor((Math.random() * 100)) + "%";
         circle.style.top = Math.floor((Math.random() * 100)) + "%";
         circle.style.backgroundColor = "black";
         circle.style.width = width + "px";
         circle.style.height = height + "px";
         circles.push(circle);
         document.body.appendChild(circle);
    }
}
setUp();

.circle {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

I didn't see you were using CreateJS.. in that case using the notation like so is okay..

var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

ensure that you update the stage as well.

stage.update();

I realize this question has been answered, but since I clicked on this for trying to find out how to add a class to a canvas object in jquery, I'll post how to do that.

var thing = canvas_object;
$('body').append(thing);
var canvas = $('canvas');
canvas.addClass('test');

Things inside canvas are not in DOM, but elements in Scalable Vector Graphics images are, and can be manipulated this way.

Try using SVG if convenient. svg.js is a lightweight library to manipulate SVG.

本文标签： javascriptAdd class to canvas element HTML5 amp CreateJSStack Overflow