如何使用 CSS 设置画布元素的样式

Question

我在 HTML 画布中绘制了很多图形和元素。它们都有不同的颜色、笔触等。我真的不喜欢所有这些值都在我的 JS 代码中徘徊，因为有些样式在 CSS 中，有些在代码中。

有人知道在 CSS 中定义样式并在实际渲染对象时读取样式的好方法吗？

这是我需要做的一些例子：

 context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green'; // I'd like to set with CSS
context.fill();
context.lineWidth = 5; // I'd like to set with CSS
context.strokeStyle = '#003300'; // I'd like to set with CSS
context.stroke();

http://jsfiddle.net/nedyalkov/ysgLqqh3/1/

原文由 Miroslav Nedyalkov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我参加派对有点晚了，但我遇到了同样的情况，我是这样解决的：

 // "Cache"
var classColors = {};

function getColor(className) {
    // Check for the color
    if (!classColors[className]) {

        // Create an element with the class name and add it to the dom
        $c = $('<div class="' + className + '"></div>').css('display', 'none');
        $(document.body).append($c);

        // Get color from dom and put it in the color cache
        classColors[className] = $c.css('color');

        // Remove the element from the dom again
        $c.remove();
    }

    // Return color
    return classColors[className];
}

我只需要颜色，但如果需要，您可以扩展缓存对象以容纳更多颜色。您将从函数返回一个完整的对象。下面的代码根本没有经过测试：

 var classProperties = {};

function getPropeties(className) {
    // Check for the properties object
    if (!classProperties[className]) {

        // Create an element with the class name and add it to the dom
        $c = $('<div class="' + className + '"></div>').css('display', 'none');
        $(document.body).append($c);

        // Get needed stuff from the dom and put it in the cache
        // P.S. Didn't test if canvas names are the same as css names.
        // If not you'll have to translate it
        classProperties[className] = {
            fillStyle: $c.css('color'),
            lineWidth: $c.css('border-width'),
            strokeStyle: $c.css('border-style')
        }

        // Remove the element from the dom again
        $c.remove();
    }

    // Return properties
    return classProperties[className];
}

原文由 Asken 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

通常，在画布上画很多东西的人会制作自己的具有样式属性的形状对象。例如：http: //jsfiddle.net/b93cc3ww/

 context = document.getElementById("myCanvas").getContext("2d");

function Rectangle(params) {
    this.x = params.x || 0;
    this.y = params.y || 0;
    this.width = params.width || 0;
    this.height = params.height || 0;
    this.fillStyle = params.fillStyle || "#FFFFFF";
    this.strokeStyle = params.strokeStyle || "#000000";
    this.lineWidth = params.lineWidth || 0;
}

Rectangle.prototype.draw = function () {
    if (this.fillStyle) {
        context.fillStyle = this.fillStyle;
        context.fillRect(this.x, this.y, this.width, this.height)
    }
    if (this.strokeStyle && this.lineWidth) {
        context.strokeStyle = this.strokeStyle;
        context.lineWidth = this.lineWidth;
        context.strokeRect(this.x, this.y, this.width, this.height);
    }
}

rectangles = [
    new Rectangle({
        x: 10,
        y: 10,
        width: 300,
        height: 150,
        fillStyle: "#FF0000"
    }),
    new Rectangle({
        x: 250,
        y: 10,
        width: 100,
        height: 80,
        fillStyle: "#00FF00",
        strokeStyle: "#00AA00",
        lineWidth: 5
    }),
    new Rectangle({
        x: 10,
        y: 200,
        width: 250,
        height: 80,
        strokeStyle: "#FF0000",
        lineWidth: 1
    })
]

for (var i = 0; i < rectangles.length; ++i) {
    rectangles[i].draw();
}

如果你喜欢 CSS 的工作方式，你可以制作一个形状对象，它可以接受一个“类”参数，然后在代码顶部的数组中存储一个“类”列表。

原文由 Domino 发布，翻译遵循 CC BY-SA 3.0 许可协议