Как стилизовать элементы холста с помощью 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/

Answer 1

CSS имеет определенный простор для него, то есть, он действует только на HTML-элементов. С другой стороны, Javascript имеет свои собственные переменные и может также взаимодействовать с элементами HTML. То, что вы пытаетесь сделать, это использовать CSS в качестве переменных для javascript, чего не может быть сделано.

В приведенном выше примере кода представлен фрагмент javascript, который принимает элемент HTML (в данном случае canvas) и выполняет на нем набор действий (методов). То, что вы делаете, буквально рисует по одной строке за раз, чтобы создать ваше изображение, и этот образ находится за пределами области CSS, поскольку он определяется только внутренними свойствами элементов, тогда как CSS может определять только его внешний (в частности, визуальный) свойства.

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 работы, вы могли бы сделать объект формы, который может принимать параметр «класс», а затем сохранить список «clases» в массиве в верхней части вашего код.

Answer 3

Я немного опоздал на вечеринку, но я только что был один и тот же сценарий, и я решил так:

// "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]; 
}