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/