将类添加到画布元素HTML5&创建JS [英] Add class to canvas element HTML5 & CreateJS

问题描述

我正在画布中用for循环生成5个圆，我想给他们一个类，以便可以用jquery来控制它们，但是我做错了.你们能弄清楚发生了什么吗?

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

新版本.在JonnyD的帮助下，我现在有了一个功能循环.唯一的问题是图像会附加到身体上，而不是附加到我的舞台上.我已经尝试了stage.appendChild(circle)，但是没有用.

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.

这里是指向在线资源的链接，因此您可以查看== LINK

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

推荐答案

我没有看到您使用的是CreateJS ..在这种情况下，使用这样的表示法就可以了.

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

确保您也更新了舞台.

stage.update();

这篇关于将类添加到画布元素HTML5&创建JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！