0

キャンバス パスを作成して反転し、塗りつぶしを適用することはできますか?

その特定の順序である必要があります。

例：

  1. パスを描きます。車だとしましょう。パスを塗りつぶしません(何も表示されません)
  2. 私は道をひっくり返す
  3. パスをグラデーションで塗りつぶして、グラデーションが常に同じ角度になるようにします

編集: 「塗りつぶされていない」パスで一時的なキャンバスを作成して反転させ、これを使用して「実際の」キャンバスに適用しようとしました: 

 ctx.drawImage(tempCanvas,0,0,canvasWidth, canvasHeight);

次に、次のように塗りつぶしを適用しました。

ctx.fill();

キャンバスは空のままです。正確な理由はわかりません。ある意味仕方ないのかな。

4

1 に答える 1

0

はい、できます！

描画する前にキャンバスを水平に反転すると、その後に描画するすべてが反転します。

パフォーマンスのペナルティなし!

もちろん、反転を行う前に context.save() を実行し、描画後に context.restore() を実行して、反転されていないキャンバスにさらに描画が行われるようにします。

描画の前にキャンバスを反転するには、次の変換を行います。

context.translate(canvas.width,0);
context.scale(-1,1);

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/nFvaU/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
    img{border:1px solid blue;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        var img=new Image();
        img.onload=function(){

            // 1. Save the un-flipped canvas
            ctx.save();

            // 2. Flip the canvas horizontally
            ctx.translate(canvas.width,0);
            ctx.scale(-1,1);

            // 3. Draw the image -- or you're path of a car
            ctx.drawImage(img,0,0);

            // 4. Restore the canvas so further draws are not flipped horizontally
            ctx.restore();

        }
        img.src="http://dl.dropbox.com/u/139992952/car.png";

    }); // end $(function(){});
</script>

</head>

<body>
    <p>Original Image</p>
    <img src="http://dl.dropbox.com/u/139992952/car.png" width=200 height=78>
    <p>Horizontally flipped Image on Canvas</p>
    <canvas id="canvas" width=200 height=78></canvas>
</body>
</html>
于 2013-02-24T23:24:48.207 に答える