将类添加到画布元素HTML5和CreateJS

Question

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

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），但是它不起作用。

这里是到在线资源的链接，所以你们可以检查出来= LINK

Answer 1

您的代码有很多错误。

您正在尝试向数组中的字符串添加属性，这是不可能的。使用点或括号符号将属性添加到对象。

点符号

foo.bar.baz
方括号符号

foo['bar']['baz']
[我想您想在'屏幕'上或在技术上更正确的DOM（https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model）上的随机位置上创建五个圆，将H＆W设置为60px，类名为myClass。
我已经为您重写了代码，您可以根据需要删除样式javascript行并将其添加到CSS中。您真正做错的就是尝试向数组值添加属性，错误的代码处理技术以及缺少在宽度，高度之前关闭.style。 注意

仅将className的以及width和height属性添加到DOM元素。

您现在可以通过将nth-child选择器与CSS一起使用for循环和圆形数组或来访问各个圆形。 例如

.circle：nth-​​child（1）{动画/过渡}

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

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

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

确保您也更新了舞台。

stage.update();

画布中的内容不在DOM中，但Scalable Vector Graphics图像中的元素已存在，并且可以通过这种方式进行操作。

如果方便，请尝试使用SVG。 svg.js是用于处理SVG的轻量级库。

我知道已经回答了这个问题，但是由于我单击了此按钮试图找出如何在jquery中向画布对象添加类，因此我将发布如何执行此操作。

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

Answer 2

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

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

Answer 3

画布中的内容不在DOM中，但Scalable Vector Graphics图像中的元素已存在，并且可以通过这种方式进行操作。

如果方便，请尝试使用SVG。 svg.js是用于处理SVG的轻量级库。

Answer 4

我知道已经回答了这个问题，但是由于我单击了此按钮试图找出如何在jquery中向画布对象添加类，因此我将发布如何执行此操作。

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