如何将图像放入圆形画布？

Question

>>> Jsfiddle

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(55,95,30,0,2*Math.PI); ctx.stroke(); var canvas = document.getElementById('myCanvas'), context = canvas.getContext('2d'); make_base(); function make_base() { base_image = new Image(); base_image.src='https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80'; base_image.onload = function(){ context.drawImage(base_image, 20, 20); } } 

 <canvas id="myCanvas" width="236" height="413" style="border:1px solid #000000; position:absolute; top:66px; left:22px;"></canvas> 

我尝试将图像放到画布上而不是我的圆圈位置。 但是我不知道如何调整方形图像的大小以与我的画圆圈相同的大小并放置在相同的位置。

我该怎么办？

Answer 1

window.onload=function(){
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        c.addEventListener("click",function(){
                        ctx.clearRect(0, 0, c.width, c.height);
                        var object = images.shift();
                        images.push(object);
                        create(ctx);
                    },false)

        var loaded=0;
        var error=0;

        var images=new Array
        (
            {
                image:null,
                url:"https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?s=80",
                expandW:0,
                expandH:0,
                clip:false,
                visible:true,
                shape:
                {
                    x:0,
                    y:0,
                    rect:
                    {
                        w:30,
                        h:50
                    },
                    boundary:
                        function(){return {w:this.rect.w,h:this.rect.h,centerX:this.rect.w/2,centerY:this.rect.h/2};}
                }
            },
            {
                image:null,
                url:"http://iconbug.com/data/7c/512/6e1cd685219a18b951b191ad04407324.png",
                expandW:0,
                expandH:0,
                clip:true,
                visible:true,
                shape:
                {
                    x:30,
                    y:30,
                    circle:
                    {
                        r:30
                    },
                    boundary:
                        function(){return {w:this.circle.r*2,h:this.circle.r*2,centerX:0,centerY:0};}
                }
            }
        );

        function loadImages(ctx)
        {

            for (var i=0;i<images.length;i++)
            {

                images[i].image= new Image();
                images[i].image.src = images[i].url;

                images[i].image.onerror=function(){
                    loaded++;
                    error++;
                    loadedText(images.length,loaded,error);

                    if(loaded===images.length)
                    {
                        create(ctx);
                    }
                };
                images[i].image.onload=function(){

                    loaded++;

                    loadedText(images.length,loaded,error);



                    if(loaded===images.length)
                    {
                        create(ctx);
                    }
                };
            }
        }
        function loadedText(sum,count,error)
        {
            if(error)
                console.log((count-error)+" images loaded from "+count+"."+error+" images not loaded.");
            else
                console.log(count+" images loaded from "+count+".");
        }
        function create(ctx)
        {

            for (var i=0;i<images.length;i++)
            {
                ctx.save();
                if(images[i].image !==null && images[i].visible)
                {
                    var object=images[i];
                    var boundary=object.shape.boundary();
                    var image=object.image;
                    var shape=object.shape;
                    if(shape.circle)
                    {
                        drawCircle(
                            shape.x,
                            shape.y,
                            shape.circle.r,
                            ctx,
                            object.clip
                        );
                    }
                    if(shape.rect)
                    {
                        drawRect(
                            shape.x,
                            shape.y,
                            shape.rect.w,
                            shape.rect.h,
                            ctx,
                            object.clip
                        );
                    }
                    if(!object.clip)
                    {

                        image.width=image.width*(boundary.w/image.width);
                        image.height=image.height*(boundary.h/image.height);
                    }
                    image.width=image.width+object.expandW;
                    image.height=image.height+object.expandH;

                    var x=(shape.x+boundary.centerX)-image.width/2;
                    var y=(shape.y+boundary.centerY)-image.height/2;

                    ctx.drawImage(image, x, y,image.width,image.height);
                }
                ctx.restore();
            }
        }
        function drawCircle(x,y,r,ctx,clip){
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2 * Math.PI);
            if(clip)
            {
                ctx.clip();
            }
            ctx.stroke();
        }
        function drawRect(x,y,w,h,ctx,clip){
            ctx.beginPath();
            ctx.rect(x, y, w, h);
            if(clip)
            {
                ctx.clip();
            }
            ctx.stroke();
        }

        loadImages(ctx);
};

添加多个图像。

如果没有很多图片，则一次加载它们会更容易。

在控制台（F12）上，您可以看到加载进度。

每个图像都有自己的选项。

图片-稍后会填充

网址

expandW，expandH-您可以在裁剪后操作图片。

剪裁-是使图像的图片尺寸变大还是从图像中剪裁形状。

可见-我们是否显示图像。

剪裁形状

形状选项

形状的x，y位置

矩形或圆形形状。

边界-我们获得形状中心位置以及形状和高度。 （带有和的圆实际上是半径的两倍）。

用鼠标单击画布上，您可以循环浏览所有加载的图片。

Answer 2

您必须为此使用clip 。 这是此http://codepen.io/sam83045/pen/eBKRPr?editors=0010的 Codepen

您编辑的javascript代码如下：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55, 95, 30, 0, 2 * Math.PI);
ctx.clip();
ctx.stroke();

var canvas = document.getElementById('myCanvas'),
  context = canvas.getContext('2d');

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = 'https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80';
  base_image.onload = function() {
    context.drawImage(base_image, 16, 55);
  }
}