2

私はキャンバスを学び始めましたが、最初のイライラする状況に遭遇しました。.jpg src のクリッピング マスクを三角形で作成しようとしています。コンテキストを復元して他のパスを追加しようとするまで、すべて問題ないように見えます...私のクリッピングマスクはもう存在しないようです。

これが私のコードです:

    <script>
function init() {
    var canvas = document.getElementById('myCanvas');
    if(canvas.getContext) {

    var context = canvas.getContext('2d');
    var imageObj = new Image();
    imageObj.src = 'stephgopro2.jpg';

    // triangle coordonate
    context.save();
    context.beginPath;
    context.moveTo(100, 0);
    context.lineTo(0, 100);
    context.lineTo(200, 100);
    context.lineTo(100, 0);
    context.clip();

    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0, 300, 170);
    };

    context.restore();
    context.beginPath();
    context.fillStyle = '#333';
    context.rect(0, 0, 600, 200);
    context.fill();
    }
}
</script>

</head>
<body onload='init()'>
  <canvas id="myCanvas" width="600" height="200"></canvas>

</body>

それを手伝ってもらえますか？どうもありがとう。

4

1 に答える 1

1

画像は非同期で読み込まれるため、画像がキャンバスに描画される前にコンテキストがすでに復元されています。次のようにコードを更新すると、期待どおりの結果が得られます（私が思うに）。

function init() {
    var canvas = document.getElementById('myCanvas');
        if(canvas.getContext) {

        var context = canvas.getContext('2d');
        var imageObj = new Image();
        imageObj.src = 'assets/1.jpg';

        // triangle coordonate
        context.save();
        context.beginPath();
        context.moveTo(100, 0);
        context.lineTo(0, 100);
        context.lineTo(200, 100);
        context.lineTo(100, 0);
        context.stroke();
        context.clip();

        imageObj.onload = function() {
            context.drawImage(imageObj, 0, 0, 300, 170);

            // Restore the context and continue drawing now the image has been drawn
            context.restore();
            context.beginPath();
            context.fillStyle = '#333';
            context.rect(0, 0, 600, 200);
            context.fill();
        };
    }
}
于 2012-11-22T21:14:21.657 に答える