Как поместить изображение в круг холста?

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) вы можете увидеть ход загрузки.

У каждого изображения есть собственные варианты.

image- будет заселен последний

url- адрес

expandW, expandH- вы можете манипулировать Изображение после отсечения.

клип- делаем мы делаем изображение размер изображения или клип форма из изображение.

видно- изобразим.

формы отсечения формы

Варианты формы

х, у-позиционные формы

прямоугольник или круг типа формы.

граница- мы получим форму центра положения и формы с и высотой. (круг с и высота фактически удваивается от радиуса).

щелчком мыши на холсте вы можете перемещаться по всем загруженным изображениям.