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

Posted 2023-03-05

【中文标题】将类添加到画布元素 HTML5 和 CreateJS

【英文标题】：Add class to canvas element HTML5 & CreateJS

【发布时间】：2015-03-12 15:56:03

【问题描述】：

我在画布中生成 5 个带有 for 循环的圆圈，我想给它们一个类，以便我可以用 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

【问题讨论】：

当然，我添加了项目的在线链接。

圆圈不是 DOM 对象，您应该使用相对于 createjs 库的方法。您应该阅读 DOC 并看到，不幸的是，我无法在这方面为您提供更多帮助

实际上我想要实现的是能够在渲染后 3 秒通过 css 更改图像/圆圈（它们是 png 的）的背景位置。但我首先尝试了更简单的事情，比如隐藏和展示它们。有什么想法吗？

您可以使用 jCanvas 图层来实现（使用“名称”作为 ID，使用“组”作为类）

【参考方案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 元素。

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

【讨论】：

好的，你让我明白了很多，非常感谢你。但是，我想要实现的就在这里：simeriaionut.com/keafocus。我希望这些圆圈是 png 并且能够在我的画布中使用它们。我为此使用 CreateJS。所以问题是，如何使用图像而不是生成的形状以及如何将它们集成到我的画布中？

【参考方案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();

【参考方案3】：

canvas 内的东西不在 DOM 中，但 Scalable Vector Graphics 图像中的元素在并且可以通过这种方式进行操作。

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

【参考方案4】：

我意识到这个问题已经得到解答，但是因为我点击这个试图找出如何在 jquery 中向画布对象添加一个类，所以我将发布如何做到这一点。

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