Wie wird das Bild in die Leinwand des Kreises eingefügt?

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>

Ich habe versuchen, das Bild in auf Leinwand statt Position meines Kreises zu setzen. aber ich weiß nicht, wie man das quadratische Bild ändert, um mit derselben Größe meines Zeichenkreises zu kreisen und in die gleiche Position zu setzen.

Was soll ich tun?

Answer 1

Sie haben clip für diesen Einsatz. Hier ist Codepen für dieses http://codepen.io/sam83045/pen/eBKRPr?editors=0010

Und bearbeitete Javascript-Code ist wie folgt:

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); 
}; 

Fügen Sie mehrere Bilder.

Wenn Sie nicht viele Bilder haben, ist es einfacher, sie auf einmal zu laden.

Auf Konsole (F12) Sie Last Fortschritt sehen kann.

Jedes Bild hat eigene Optionen.

image- es letztere

URL- Adresse bevölkert wird

expandW, expandH- Sie Bild nach dem Beschneiden manipulieren kann.

Clip- tun wir Bildgröße von Bild zu machen oder wir Form von Bild-Clip.

sichtbar- zeigen wir Bild.

formAusschnittsForm

Form Optionen

x, y-Position der Form

rect oder Kreis Art von Form aufweisen.

Boundary-wir Form Mittelposition erhalten und mit Höhe und Form. (Kreis mit und Höhe ist eigentlich der doppelte Radius).

mit Mausklick auf Leinwand Sie durch alle geladenen Bilder können.