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

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

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

而且你编辑的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); 
    } 
} 

Answer 2

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）上，您可以看到加载进度。

每张图片都有自己的选项。

图像 - 它将填充后

URL-地址

expandW，expandH-可以裁剪后的图片处理。

剪辑 - 我们做图片的图片大小或者我们从图片剪辑形状。

可见 - 我们显示图像。

形状修剪形状

形状选项

X，形状

矩形或圆形类型的形状的y位置。

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

用鼠标点击画布上，你可以循环所有加载的图片。