所以基本上我想創建下面的畫布功能。眼下這個作品與它裏面的元素任何ID：您可以爲HTML5畫布中的項目分配值嗎？

$('.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中的所有內容都會將其背景顏色更改爲提示的內容！

來源

2013-06-28 Ryan Saxe

HTML5畫布是一個繪圖元素，一旦繪製完成，您就無法與其中的特定元素進行交互。但是，您仍然可以重繪整個畫布。另一方面，SVG可以讓你與特定元素進行交互。一個好的圖書館是raphaelJS：http：//raphaeljs.com/ –

由於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位置的對象上實現一個方法並與對象的位置和寬度/高度進行比較，也是如此。對於內存效率，你可能想要prototype的一些方法（如果他們不需要訪問內部變量等等）。

希望有所幫助。

來源

2013-06-28 10:18:54 K3N

+1，但是通過命中測試，它將如何能夠找出該組？ –

@RyanSaxe你可以爲你的對象提供一個'groupId'屬性。 – K3N

您可以爲HTML5畫布中的項目分配值嗎？

說明：

回答

相關問題