在HTML5畫布上繪制Rects

Question

是否可以在變量中存儲矩形以訪問該變量並將其移動？ 就像是：

var rect = new Rect();
/* then in update() method */
rect.x += 5;
rect.y += 5;

這樣的事情是可能的，還是每次都必須使用上下文創建一個新的矩形？ 如果這是唯一可行的方法，我不明白如何定位畫布中繪制的每個矩形。 有人可以向我解釋一下嗎？

Answer 1

HTML5 Cancas有一個位圖模型：繪制時修改畫布的像素，如果需要可以讀取像素，但像素（線條，線條等）的邏輯會丟失。

畫布模型非常快，可以在對象/矢量模型中執行過長的復雜事物，但限制是您不能更改或刪除像rects這樣的繪制對象。

如果要這樣做，則需要使用矢量/對象模型，如SVG（或純DOM對象）。

如果你想使用畫布和對象，一個解決方案是保持你的rect變量（就像你所做的那樣）在普通的javascript（畫布之外），並且每次更改rect時只需重繪整個畫布。 對於使用canvas（例如游戲）的應用程序來說，它是高效且常見的。

這是一個完整的例子：每10毫秒移動3個rects並重新繪制。

http://jsfiddle.net/dystroy/PkzDA/

我做得很簡單但干凈又高效。 你可以在真實和快速的應用程序中使用這種邏輯（我這樣做）。

Answer 2

我會用你的坐標保存你想要繪制的所有矩形的模型。 然后，您只需要聽取鼠標點擊事件（或鼠標懸停事件，無論您需要什么），並瀏覽模型的每個元素，以查看鼠標是否在矩形坐標內完成。

正如之前的海報所說，每次想要對其進行更改時都必須重繪畫布（盡管您可以通過僅重繪感興趣的區域來加快速度）。 希望那有所幫助！

編輯：

你可以定義一個矩形對象：

function Rectangle(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;

    this.contains = function(x, y) {
        return (x > this.x && x <= (this.x + this.w) &&
            y > this.y && y <= (this.y + this.h));
    }

    this.clone = function() {
        return new Dimension(this.x, this.y, this.w, this.h);
    }
}

然后有一個數組作為你的模型：

var model = [];

然后將矩形添加到它：

model.push(new Rectangle(10,10,10,10));//x, y, width, height

然后，當您單擊畫布時，從鼠標事件中檢索鼠標單擊坐標，並在數組上循環以查看是否在其中一個矩形內完成了單擊：

for (i = 0 ; i < model.length ; i++) {
 if (model[i].contains(mouseEvent.x, mouseEvent.y))
  //do something like redraw your canvas
}

Answer 3

我發現本教程確實幫助我了解了這個主題。

http://simonsarris.com/blog/510-making-html5-canvas-useful

他遍歷對象的創建，跟蹤狀態，處理鼠標事件等。

Answer 4

如果要在畫布上移動矩形，則每次更改x或y時都需要清除並重繪該矩形。

Answer 5

首先，你必須將我要說的內容與@Gaet所說的結合起來

現在關於減少上下文工作：重用相同的畫布上下文而不刪除它的選項是改變繪制矩形的方式。

您必須將合成樣式更改為'xor'，因此每當您繪制兩次矩形時，它將消失，您將能夠將其繪制到新位置。

見下面的例子：

//this will switch context to xor mode
ctx.globalCompositeOperation = 'xor';

//this will paint the rectangle
ctx.fillRect(0, 0, 100, 100);

//this will remove the rectangle
ctx.fillRect(0, 0, 100, 100);