Fatal编程技术网
  • javascript/
  • Javascript html5-绘制多个圆圈-每个圆圈填充不同的图像

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

javascript html canvas html5-canvas

Javascript html5-绘制多个圆圈-每个圆圈填充不同的图像,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,好吧，我四处看看，发现了一个代码，它能让我在画布上画一个圆圈，并用这个圆圈作为我的图像的遮罩 代码如下：（codus到我不知道的真正的创建者） 假设我想有5个不同的圆圈，所有圆圈都有不同的图像，所有圆圈和每个圆圈的位置都不同 有人知道我该怎么做吗？是的，和马特说的差不多 下面是代码和小提琴： 在画布上绘制之前，可以使用图像预加载程序加载所有5个图像，从而改进此代码 <!doctype html> <html> <head> <link rel="styl

好吧，我四处看看，发现了一个代码，它能让我在画布上画一个圆圈，并用这个圆圈作为我的图像的遮罩

代码如下：（codus到我不知道的真正的创建者）

假设我想有5个不同的圆圈，所有圆圈都有不同的图像，所有圆圈和每个圆圈的位置都不同

有人知道我该怎么做吗？

是的，和马特说的差不多

下面是代码和小提琴：

在画布上绘制之前，可以使用图像预加载程序加载所有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>


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var img1=新图像（）；
img1.onload=函数（）{
var img2=新图像（）；
img2.onload=函数（）{
//画一个剪辑圆，然后画一个要剪辑的图像
ctx.save（）；
ctx.beginPath（）；
ctx.strokeStyle=“蓝色”；
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（）；
//绘制第二个剪辑圆，然后绘制要剪辑的图像
ctx.save（）；
ctx.beginPath（）；
ctx.strokeStyle=“绿色”；
ctx.arc（275100,75,0,2*Math.PI，假）；
ctx.stroke（）；
ctx.clip（）；
ctx.beginPath（）；
ctx.drawImage（IMG2150,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 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（）
非常重要。

我喜欢您关于可重用函数的想法，但要使其正常工作，您可能需要进行图像预加载，并将实际图像提供给它，而不仅仅是imageUrl。顺便说一句，img.src=imageUrl应该放在img.onload之后；）@markE：无可否认，如果没有预加载，图像将异步绘制（以某种随机顺序），如果它们重叠，这可能是不可接受的（导致错误的图像有时位于顶部）。关于
img.src
和
img.onload
的顺序，这是一个很好的捕获！谢谢你指出这一点！我更新了它。简而言之，如果上面的代码对一个图像有效，那么对5个图像使用它5次。或者创建一个函数，其中包含每个图像更改的值的参数。我认为上面代码中缺少的主要内容是使用
save（）
和
restore（）
，以允许代码被多次使用。嘿，马克-谢谢你的评论-对我来说很有意义，并且肯定可以作为下面更圆滑的解决方案的替代方案 
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');