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

好了，我四处看了看，找到了一个代码，可以成功地让我在画布上画一个圆圈，并使用这个圆圈作为我的图像的蒙版。

代码看起来像这样:(感谢我不知道的真正的创造者)

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个不同的圆圈，它们都有不同的图像，并且每个圆圈的位置都不同。

有人知道我该怎么做吗?

为了保持代码简短，创建一个函数，其中的参数用于从一个图像到另一个图像的设置。

可重用功能:

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()非常重要。

对，跟Matt说的差不多…

下面是代码和提示: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>

相关内容

最新更新

热门标签：