Question

好吧，所以我环顾四周，找到了一个成功的代码，让我能够在画布上绘制一个圆圈，并将该圆圈用作我图像的遮罩。

代码看起来像这样:(我不知道真正的创造者的鳕鱼）

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个不同的圆圈，所有圆圈都有不同的图像，而且所有的圆圈都有不同的位置。

任何人都知道如何判断这个？

Answer 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>

Answer 2

要保持代码简短，请创建一个函数，其中包含将从图像更改为图像的设置参数。

可重复使用的功能：

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()和restore()的使用非常重要。

html5 - 绘制多个圆圈 - 每个圆圈都填充不同的图像

2 个答案: