2

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

这是一个例子。在这段代码中（位于http://build.rivingtondesignhouse.com/piol/test/）我试图绘制第一个矩形，然后 save() 它在堆栈上，然后绘制第二个矩形（并且不要保存它），然后当我的 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();

4

1 回答 1

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(). 保存位图的唯一方法是将它（或它的一部分）绘制到另一个画布（使用anotherCanvasContext.drawImage(canvasIWantToSave, 0, 0)），或者保存足够的信息，以便通过适当的更改重新绘制整个场景。

以下是您可以重新构造代码以使其执行所需的一种方式的示例：http: //jsfiddle.net/xwqXb/

于 2012-07-29T05:24:03.940 回答