0

さて、周りを見回して、キャンバスに円を描き、その円を画像のマスクとして使用できるコードを見つけました。

コードは次のようになります: (私が知らない本当の作成者へのコード)

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

ctx.arc(100,100, 50, 0, Math.PI*2,true); // you can use any shape
ctx.clip();

var img = new Image();
img.addEventListener('load', function(e) {
    ctx.drawImage(this, 0, 0, 200, 300);
}, true);
img.src="/path/to/image.jpg";

5 つの異なる円をすべて異なる画像で配置し、それぞれを異なる位置に配置したいとします。

誰かがそれについてどのように行くかについて考えを持っていますか?

4

2 に答える 2

1

ええ、ほとんどマットが言ったことです...

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

キャンバスに描画する前に、画像プリローダーを使用して 5 つの画像すべてを読み込むことで、このコードを改善できます。

<!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");

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

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

            // draw a clipping circle and then an image to clip
            ctx.save();
            ctx.beginPath();
            ctx.strokeStyle="blue";
            ctx.arc(100, 100, 50, 0 , 2 * Math.PI, false);
            ctx.stroke();
            ctx.clip();
            ctx.beginPath();
            ctx.arc(100, 100, 50, 0 , 2 * Math.PI, false);
            ctx.drawImage(img1,10,0);
            ctx.restore();

            // draw a second clipping circle and then an image to clip
            ctx.save();
            ctx.beginPath();
            ctx.strokeStyle="green";
            ctx.arc(275, 100, 75, 0 , 2 * Math.PI, false);
            ctx.stroke();
            ctx.clip();
            ctx.beginPath();
            ctx.drawImage(img2,150,0);
            ctx.restore();

        }
        img2.src="http://dl.dropbox.com/u/139992952/coffee.png";
    }
    img1.src="http://dl.dropbox.com/u/139992952/house%20vector.png";

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

</head>

<body>
    <canvas id="canvas" width=400 height=250></canvas>
</body>
</html>
于 2013-03-15T02:15:23.703 に答える
1

コードを短くするために、画像ごとに変更される設定のパラメーターを使用して関数を作成します。

再利用可能な機能:

function drawImageCircle(ctx, circleX, circleY, radius,
                              imageX, imageY, imageWidth, imageHeight, imageUrl) {

    var img = new Image();
    img.onload = function(){
        ctx.save();
        ctx.beginPath();
        ctx.arc(circleX, circleY, radius, 0, Math.PI*2, true);
        ctx.clip();
        ctx.drawImage(this, imageX, imageY, imageWidth, imageHeight);
        ctx.restore();
    };
    img.src = imageUrl;
}

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

drawImageCircle(ctx, 100,100, 50,  0,0,     200,300, 'image1.jpg');
drawImageCircle(ctx, 400,400, 50,  300,300, 200,300, 'image2.jpg');

これを複数回行う場合は、 save()andの使用が重要です。restore()

于 2013-03-15T02:25:09.863 に答える