如何在画布对象jQuery中添加类

Question

我使用画布工作，但遇到问题，我想使用画布对象创建布局。但我想在 css 中创建对象，并在 HTML 中创建。

现在我创建：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();


context.rect(10, 50, 200, 100);
context.fillStyle = 'red';
context.fill();
context.fillStyle = 'black';
context.font = '20px Courier';
context.shadowColor = 'transparent';
context.shadowBlur = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.fillText(`List item`, 70, 80);
context.fillText(`List item2`, 70, 130);

var image = new Image();
image.src = "https://pngimage.net/wp-content/uploads/2018/06/machine-icon-png-9.png";
image.onload = function () {
    context.drawImage(image, 10, 70, 50, 50);
};

CSS：

.box-test {
    width: 150px;
    height: 100px;
    background-color: #fff;
}

HTML：

 <canvas id="myCanvas" width="1280" height="720"
            style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>

此代码是带有图像和文本的构建框，但是我想从 CSS 中获取颜色、图像，不知何故可以在画布中使用 css 样式创建对象？

如你所见，我有 box-test 类，在这里我为 box 提供属性：

context.rect(10, 50, 200, 100);
    context.fillStyle = 'red';
    context.fill();

我可以在这里只使用坐标，而宽度、高度、颜色来自css吗？

Answer 1

如果你使用 SVG，你可以动态添加元素

var canvas = document.getElementById("svgArea");
var rec = document.createElementNS("http://www.w3.org/2000/svg","rect")
rec.setAttributeNS(null, "class","box-test");
canvas.appendChild(rec);

var image = document.createElementNS("http://www.w3.org/2000/svg","image")
image.setAttributeNS(null, "href","https://pngimage.net/wp-content/uploads/2018/06/machine-icon-png-9.png");
image.setAttributeNS(null, 'height', '50');
image.setAttributeNS(null, 'width', '50');
image.setAttributeNS(null, 'x', 60);
image.setAttributeNS(null, 'y', 60); 
canvas.appendChild(image );

var text = document.createElementNS("http://www.w3.org/2000/svg","text");
text.textContent= "Hello World!";
text.setAttributeNS(null, 'x', 120);
text.setAttributeNS(null, 'y', 120); 
text.setAttributeNS(null, "class","text-style");
canvas.appendChild(text);

.box-test {
    width: 50px;
    height: 50px;
	x: 20px;
	y: 20px;
    fill:rgb(0,0,255);
    stroke-width:3;
    stroke:rgb(0,0,0);
}

.text-style {
    font-size: 20px;
    font-family: Courier;
}

<svg id="svgArea" width="500" height="500"></svg>

要设置X 和Y 坐标，您可以使用此代码

rec.setAttributeNS(null, 'x', x);
rec.setAttributeNS(null, 'y', y);

设置width和height

rec.setAttributeNS(null, 'height', '50');
rec.setAttributeNS(null, 'width', '50');