Можете ли вы присвоить значения элементам в холсте HTML5?

Question

Так что, по существу, я хочу создать функцию ниже для холста. Сейчас это работает с любым идентификатором с элементами внутри него:

$('.class').click(function(){ 
    var color = prompt('what color would you like to change this stroke to?'); 
    $('.class').each(function(){ 
     $(this).css('background-color', color); 
    }); 
}); 

Есть ли способ присвоить значение элементов в полотне, так что я могу привести то, что мне нужно, или это просто невозможно?

Объяснение:

Если что неясно ... позволяет сказать, что я добавляю вещи на мой холст в группах по 10, когда я нажал на кнопку. Если я нажму эту кнопку 3 раза, тогда у меня будет 3 группы из 10. Если бы я нажимал на что-либо из группы 2, тогда все вещи в группе 2 изменили бы свой фоновый цвет на тот, который был запрошен!

Answer 1

As Canvas - это пассивный элемент, как в том, что вы держите пиксели, которые вы там ставите, не зная, что они собой представляют, вам нужно самому хранить все.

Для этого вы можете создавать объекты, содержащие важную информацию, такую ​​как регион и цвет.

Например (есть зиллионы способов сделать это, но для простоты):

// ctx = context 
function myObject(ctx, x, y, w, h, color) { 

    this.render = function() { 
     ctx.fillStyle = color; 
     ctx.fillRect(x, y, w, h); 
    } 

    this.setColor = function(newColor) { 
     color = newColor; 
     this.render(); 
    } 

    this.setPosition = function(newX, newY) { 
     x = newX; 
     y = newY; 
     this.render(); 
    } 
    //... etc. ... 
} 

Теперь вы можете создать массив, или стек, чтобы сохранить свои объекты:

var stack = []; 

Когда вы нажмете кнопку:

var w = 50, h = 50, i = 0; 

for(;i < 10; i++) { 
    var o = myObject(ctx, i * w - 2, 0, w, h); 
    stack.push(o); 
    o.render(); 
} 

Когда вам нужно обновить объект, просто вызовите его setColor Функция:

//n = index, use a for-loop to update a range (group) 
stack[n].setColor(newColor); 

Если вам нужны группы, то вы можете сложить их, как это:

var group = []; 

Заливка группу, как описано выше, а затем:

stack.push(group); 

(и вы делаете удар тестирования таким же образом, реализуя метод объекта, который принимает положение ax и y и сравнивается с положением объекта и шириной/высотой).

Для эффективности использования памяти вы, вероятно, захотите использовать некоторые из методов (если им не нужен доступ к внутренним переменным и т. Д.).

Надеюсь, что это поможет.