用图片填充HTML5弧 - HTML5 Canvas

Question

我有一个HTML5 Canvas（JSFiddle），如下所示：

我通过以下方法创建球：

function createball(x,y,r,color){
    context.beginPath();
    context.arc(x,y,r,0,Math.PI*2,true);
    context.fillStyle = color;
    context.fill();

}

如何用图像填充球？我的意思是一个可能有图案或一些自然色的图像？

Answer 1

您可以创建一个模式并将球的fillStyle设置为该模式

以下是示例代码和演示：

＆＃13;

＆＃13;

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


var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/checkerboard.jpg";
function start(){
  var pattern=ctx.createPattern(img,'repeat');
  ctx.beginPath();
  ctx.arc(50,50,15,0,Math.PI*2);
  ctx.closePath();
  ctx.fillStyle=pattern;
  ctx.fill();
  ctx.stroke();
}

＆＃13;

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

＆＃13;

<h4>Source Image:</h4>
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/checkerboard.jpg'>
<h4>Fill Circle with pattern made from source image</h4>
<canvas id="canvas" width=100 height=100></canvas>

＆＃13;

＆＃13;

＆＃13;