我想在弧内添加图像,但图像应该用弧移动。目前我有一些代码,它正在重复,但是当它放入无重复参数时,它在弧内变为空白。
以下是我正在寻找的内容,但图片未正确居中: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();
}
答案 0 :(得分: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);
}
这是一个演示:
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>
&#13;