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

这里有一个在线资源链接，供大家查看 = 链接

- SimeriaIonut

---

当然，我已经将一个在线链接添加到该项目中。 - SimeriaIonut

圆圈并不是DOM对象，你应该使用与createjs库相关的方法。你应该阅读文档并查看，不幸的是，我无法在这方面为你提供更多帮助。 - A. Wolff

实际上我想要实现的是能够通过 CSS 在图像/圆形（它们是 PNG 格式的）渲染后 3 秒钟改变它们的背景位置。但我先尝试了一些更简单的事情，比如隐藏和显示它们。你有什么想法吗？ - SimeriaIonut

您可以使用jCanvas图层（使用“name”作为ID和“groups”作为类）来实现。 - nicolallias

Answer 1

您的代码有很多问题。

您试图向数组中的字符串添加属性，这是不可能的。使用点号或方括号表示法将属性添加到对象中。

点表示法

foo.bar.baz

方括号表示法

foo['bar']['baz']

我认为你想要做的是在“屏幕”上或更准确地说是DOM（https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model）上创建五个圆形，随机位置和固定宽高（60px），并设置它们的类名为myClass。

我已经为您重新编写了代码，您可以删除style JavaScript行并在CSS中添加它们。您真正做错的事情是尝试向数组值添加属性，这是不正确的技术，并且缺少了.width和.height之前的.style。请注意，只能向DOM元素添加className和width、height属性。

您现在可以通过for循环和circles数组或使用CSS的nth-child选择器访问各个圆形。例如：.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%;
}

- JonnyD

---

好的，你让我更清楚了解情况，非常感谢。然而，我想实现的是在这里：http://simeriaionut.com/keafocus/。我希望那些圆圈是PNG格式的，并能够在我的画布中使用它们。我正在使用CreateJS来完成这项工作。所以问题是，如何使用图像代替生成的形状，并将它们集成到我的画布中？ - SimeriaIonut

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

请确保您同时更新阶段。

stage.update();

- JonnyD

Answer 3

我知道这个问题已经有答案了，但是因为我点击进来是想找到如何在jquery中给canvas对象添加类名的方法，所以我会告诉你如何做。

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

- Millar248

Answer 4

Canvas 中的元素不在 DOM 中，但是 可缩放矢量图形 图像中的元素在 DOM 中，并且可以通过这种方式进行操作。

如果方便的话，请尝试使用 SVG。svg.js 是一个轻量级的操作 SVG 的库。

- pii_ke