Javascript HTML5画布-如何填充（）特定上下文

我正在尝试制作一个网站，在画布上绘制一幅图像，然后用户可以按下ctx的按钮。用颜色填充它的某些部分。我遇到的问题是，我只能使用ctx.fill（）来填充最近创建的形状，而这通常不是我想要的形状

这里有一个例子。在这段代码（live at）中，我试图绘制第一个矩形，然后（）将其保存在堆栈上，然后绘制第二个矩形（并且不保存），然后在调用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();

var帆布；
var-ctx；
函数init（）{
canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（“2d”）；
draw（）；
}
函数draw（）{
ctx.fillStyle='#FA6900'；
ctx.shadowOffsetX=5；
ctx.shadowOffsetY=5；
ctx.shadowBlur=4；
ctx.shadowColor='rgba（2042042042040.5）'；
ctx.fillRect（0,0,15150）；
ctx.save（）；
ctx.fillStyle='#E0E4CD'；
ctx.shadowOffsetX=10；
ctx.shadowOffsetY=10；
ctx.shadowBlur=4；
ctx.shadowColor='rgba（2042042042040.5）'；
ctx.fillRect（30,0,30150）；
}
函数fill（）{
var image=新图像（）；
image.src=”http://www.html5canvastutorials.com/demos/assets/wood-pattern.png";
image.onload=绘图模式；
函数drawPattern（）{
ctx.restore（）；
ctx.fillStyle=ctx.createPattern（图像，“重复”）；
ctx.fill（）；
}
}
init（）；

---

在我回答这个问题之前，我们需要澄清一些误解

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（）

，您不会保存矩形（或任何绘制的东西）。保存位图的唯一方法是将位图（或其一部分）绘制到另一个画布（使用另一个CanvasContext.drawImage（canvasIWantToSave，0，0））或保存足够的信息，以便通过适当的更改重新绘制整个场景

---

下面是一个例子，说明了一种可以重新构造代码的方法，使其满足您的需要：

这应该会让您开始学习！最好的……谢谢。这是我发布的不起作用的代码，但是在JSFIDLE中。你能帮我找到解决办法吗？右键点击你看到它在小提琴上工作的地方。您应该能够看到HTML的源代码。它很突出。。。复制粘贴并与你做错的事情进行比较。（提示，检查结果部分的源代码！）但我查看的源代码是错误的。我添加了一个链接来调用fill（）函数。我希望该链接使第一个矩形填充（）。我认为，您还可以通过将位图“序列化”为字符串，从画布“保存”位图——调用

toDataURL

。