2

Canvas に画像が描画される Web サイトを作成しようとしています。その後、ユーザーはボタンを押して ctx.fill() の特定の部分に色を付けることができます。ctx.fill() で作成した最新のシェイプしか使用できないという問題が発生していますが、これは多くの場合、必要なシェイプではありません。

これが例です。このコード ( http://build.rivingtondesignhouse.com/piol/test/に住んでいます) では、最初の四角形を描画してから、それをスタックに save() してから、2 番目の四角形を描画しようとしています (そして、それを保存します)、その後、私の fill() 関数が呼び出されたときに、最初の四角形を restore() し、別のパターンで 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)) か、適切な変更を加えてシーン全体を再描画できる十分な情報を保存することです。

以下は、コードを再構成して目的の動作をさせる方法の 1 つの例です: http://jsfiddle.net/xwqXb/

于 2012-07-29T05:24:03.940 に答える