如何在畫布弧內添加圖像

Question

我想在弧內添加圖像，但圖像應該用弧移動。目前我有一些代碼，它的工作重複，但是當它把無重複的參數，然後它在弧內空白。

這是我正在尋找，但圖像沒有正確居中：Image is a wheel。

下面是代碼

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

一個pattern是不是在你的情況下，使用良好的工具...相反：

1. 創建包含您的標誌圖像內冒出一個第二畫布一個圓圈。

2. 然後drawImage(logoCanvas,x,y)將logo-canvas放入背景圖片。

這裏的代碼來創建標誌帆布您的標誌圖像的一個圓圈內冒出。該imgTargetX & imgTargetY參數讓你指定要出現在圓的中心，原來的標誌形象的一部分：

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

下面是一個演示：

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>