如何在畫布弧內添加圖像

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)將徽標畫布繪制到您的背景圖像中。

這是創建徽標畫布的代碼，其中您的徽標圖像被裁剪在一個圓圈內。 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>