wie Bild in Leinwandbogen hinzufügen

Question

Ich möchte Bild im Bogen hinzufügen, aber Bild sollte mit Bogen bewegt werden. Zur Zeit habe ich etwas Code und es funktioniert für Wiederholung, aber wenn es kein Wiederholungsargument gibt, dann wird es innerhalb von Bogen leer.

Hier ist, was ich suche, aber das Bild ist nicht richtig zentriert: Image is a wheel. Hier

ist der Code

canvas = document.createElement('canvas'); 
ctx = canvas.getContext("2d"); 
var img = new Image(); 
img.src = (window.location.origin + window.location.pathname) + 'assets/files/' + (wheel.logoURL); 
      img.onload = function() { 
       var pattern = ctx.createPattern(img, 'repeat'); 
       ctx.beginPath(); 
       ctx.arc(centerX, centerY, 50, 0, PI2, false); 
       ctx.closePath(); 
       ctx.fillStyle = pattern; 
       ctx.fill(); 
       ctx.stroke(); 
} 

Answer 1

A pattern kein gutes Werkzeug ist in Ihrem Fall verwenden ... Statt:

1. eine zweite Leinwand Erstellen Sie Ihr Logo-Bild hält innen abgeschnitten ein Kreis.

2. Dann drawImage(logoCanvas,x,y) die Logo-Leinwand in Ihr Hintergrundbild.

Hier Code ein Logo-Leinwand in einem Kreis, wo Ihr Logobild wird abgeschnitten zu erstellen. Die imgTargetX & imgTargetY Argumente können Sie angeben, welcher Teil des Original-Logo-Bild, das Sie in der Mitte des Kreises angezeigt werden soll:

function createLogoCanvas(img,radius,imgTargetX,imgTargetY){ 
    var c=document.createElement('canvas'); 
    var cctx=c.getContext('2d'); 
    // resize the canvas to the diameter of the desired circle (2*radius) 
    c.width=c.height=radius*2; 
    // fill an arc with the specified radius 
    cctx.beginPath(); 
    cctx.arc(c.width/2,c.height/2,radius,0,Math.PI*2); 
    cctx.fill(); 
    // use compositing to draw the logo img only 
    // inside the just-filled arc 
    cctx.globalCompositeOperation='source-atop'; 
    // draw the image in the arc 
    // imgTarget will be at the center of the arc 
    cctx.drawImage(img,-imgTargetX+radius,-imgTargetY+radius); 
    // reset compositing to default 
    cctx.globalCompositeOperation='source-over'; 
    // return the logo-canvas 
    return(c); 
} 

Und hier ist ein Demo:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var bk=new Image(); 
 
bk.onload=start; 
 
bk.src="https://dl.dropboxusercontent.com/u/139992952/multple/spinning%20wheel1.png"; 
 
var logo=new Image(); 
 
logo.onload=start; 
 
logo.src="https://dl.dropboxusercontent.com/u/139992952/multple/marioStanding.png"; 
 
var imgCount=2; 
 
function start(){ 
 
    if(--imgCount>0){return;} 
 

 
    cw=canvas.width=bk.width; 
 
    ch=canvas.height=bk.height; 
 

 
    // draw the background 
 
    ctx.drawImage(bk,0,0); 
 
    
 
    // create a logo-canvas containing the logo image in a circle 
 
    var logoCanvas=createLogoCanvas(logo,50,60,45); 
 
    
 
    // draw the logo-canvas on the background 
 
    ctx.drawImage(logoCanvas,261,187);  
 
} 
 

 
function createLogoCanvas(img,radius,imgTargetX,imgTargetY){ 
 
    var c=document.createElement('canvas'); 
 
    var cctx=c.getContext('2d'); 
 
    // resize the canvas to the diameter of the desired circle (2*radius) 
 
    c.width=c.height=radius*2; 
 
    // fill an arc with the specified radius 
 
    cctx.beginPath(); 
 
    cctx.arc(c.width/2,c.height/2,radius,0,Math.PI*2); 
 
    cctx.fill(); 
 
    // use compositing to draw the logo img only 
 
    // inside the just-filled arc 
 
    cctx.globalCompositeOperation='source-atop'; 
 
    // draw the image in the arc 
 
    // imgTarget will be at the center of the arc 
 
    cctx.drawImage(img,-imgTargetX+radius,-imgTargetY+radius); 
 
    // reset compositing to default 
 
    cctx.globalCompositeOperation='source-over'; 
 
    // return the logo-canvas 
 
    return(c); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<h4>Background wheel plus logo-canvas<br>Logo-canvas is logo (Mario!) cropped inside a circle</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>