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不适合在您的情况下使用...而是：

创建第二个画布，将您的徽标图像裁剪成圆圈。
然后将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);
}

这是一个演示：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在画布弧内添加图像

1 个答案: