用圖片填充HTML5弧-HTML5畫布

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

}

如何用圖像填充球？ 我的意思是圖像可能有p啪聲或某些自然色彩？

Answer 1

您可以創建一個圖案並將球的fillStyle設置為該圖案

這是示例代碼和演示：

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

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

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