HTML5 Canvas-如何填充（）特定上下文

Question

我正在嘗試創建一個在Canvas上繪制圖像的網站，然后用戶可以按下按鈕ctx.fill（）用顏色對其某些部分進行着色。 我遇到的問題是，我只能ctx.fill（）最新創建的形狀，而該形狀通常不是我想要的形狀。

這是一個例子。 在這段代碼中（位於http://build.rivingtondesignhouse.com/piol/test/ ），我試圖繪制第一個矩形，然后將它保存（）到堆棧上，然后繪制第二個矩形（不要保存），然后在調用我的fill（）函數時，我想使用不同的模式來還原（）第一個矩形和ctx.fill（）。 它不起作用！

實際上，我實際上是嘗試在繪制圖像后用用戶選擇的任何顏色填充此復雜形狀的灰色部分，但是我認為技術是相同的。 （http://build.rivingtondesignhouse.com/piol/test/justTop.html）

在此先感謝您的幫助！！！

這是代碼：

<script type="text/javascript">
var canvas;
var ctx;

function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    draw();
}


function draw() {   
    ctx.fillStyle = '#FA6900';
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(0,0,15,150);
    ctx.save();

    ctx.fillStyle = '#E0E4CD';
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(30,0,30,150);
}

function fill(){
    var image = new Image();
    image.src = "http://www.html5canvastutorials.com/demos/assets/wood-pattern.png";
    image.onload = drawPattern;
    function drawPattern() {
        ctx.restore();
        ctx.fillStyle = ctx.createPattern(image, "repeat");
        ctx.fill();
    }
}

init();

Answer 1

在我可以回答這個問題之前，我們需要消除一些誤解。

save()和restore()不會保存和還原畫布位圖。 相反，它們保存並還原在畫布上下文中設置的所有屬性，僅此而已！

例如

ctx.fillStyle = 'red';
ctx.save(); // save the fact that the fillstyle is red
ctx.fillStyle = 'blue'; // change the fillstyle
ctx.fillRect(0,0,5,5); // draws a blue rectangle
ctx.restore(); // restores the old context state, so the fillStyle is back to red
ctx.fillRect(10,0,5,5); // draws a red rectangle // draws a red rectangle

看到這里的代碼。

因此，您不必通過調用save()來save()矩形（或任何繪制的內容save() 。 保存位圖的唯一方法是通過將位圖（或部分位圖）繪制到另一個畫布上（使用anotherCanvasContext.drawImage(canvasIWantToSave, 0, 0) ）或保存足夠的信息，以便可以使用適當的位圖重繪整個場景。變化。

這是一個示例的示例，您可以通過這種方法重新構造代碼，使其執行所需的操作： http : //jsfiddle.net/xwqXb/