0

円やカスタムパスのようなパスを画像で塗りつぶしたいのですが、画像のピクセルが閉じたパスの外側に存在しないように、画像を引き伸ばしたいです。Canvas オブジェクトを使用して HTML5 でこれを達成することは可能ですか?

これが私のカスタムパスです：

ctx.beginPath();
    ctx.moveTo(170, 80);
    ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
    ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
    ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
    ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
    ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
    ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);

    // complete custom shape
    ctx.closePath();
    ctx.lineWidth = 5;

    ctx.fillStyle = '#8ED6FF';
    ctx.fill();

    ctx.strokeStyle = 'blue';
    ctx.stroke();

私が達成したいのは、雲を画像で満たして引き伸ばすことです。見た目が悪くても構いません。

4

1 に答える 1

5

[OPからの詳細情報に基づいて編集]

ima.jsは、次のように 2 つの画像を結合する小さな画像スクリプトです。

ここに画像の説明を入力

キャンバスを使用して、次のような 1 つのワープ エンベロープ イメージに変換します。

ここに画像の説明を入力

http://ima.hobby.infi.nl/#でデモを見ることができます。

スクリプトはhttp://ima.hobby.infi.nl/ima.jsで入手できます。

[OPが詳細情報を追加する前の以前の回答]

パス内の画像をクリップできます。

はい、次のようにサイズの小さい画像を「引き伸ばす」ことができます。

context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);

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

<!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;}
</style>

<script>
    $(function(){

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

    // draw the cloud
    ctx.beginPath();
    ctx.moveTo(170, 80);
    ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
    ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
    ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
    ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
    ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
    ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);
    ctx.closePath();
    ctx.lineWidth = 5;
    ctx.fillStyle = '#8ED6FF';
    ctx.fill();
    ctx.strokeStyle = 'blue';
    ctx.stroke();

    // clip any subsequent draws to the cloud
    ctx.beginPath();
    ctx.moveTo(170, 80);
    ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
    ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
    ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
    ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
    ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
    ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);
    ctx.closePath();
    ctx.clip();

    // draw an image inside the cloud
    var img=new Image();
    img.onload=function(){
        ctx.drawImage(this,0,0,img.width,img.height);
    }
    img.src="http://www.gcc.edu/_layouts/GCC/Backgrounds/1024.jpg";

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

</head>

<body>
    <canvas id="canvas" width=600 height=400></canvas>
</body>
</html>
于 2013-03-01T22:03:11.100 に答える