用图片填充 HTML5 弧线 - HTML5 Canvas答案

【问题标题】：Fill HTML5 arc with a picture - HTML5 Canvas用图片填充 HTML5 弧线 - HTML5 Canvas
【发布时间】：2015-03-22 02:16:04
【问题描述】：

我有一个 HTML5 画布 (JSFiddle)，看起来像：

我正在通过以下方法创建球：

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

}

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

【问题讨论】：

@KenFyrstenberg 不。我的问题只是关于球的直截了当。只是为了将图像填充到一个球
@benjour，其实是的。您可以创建一个模式并将球的fillStyle 设置为该模式——就像在 Ken 引用的重复答案中一样。 ;-)
@markE 也许我没明白你的意思，介意发布答案吗？
@benjour。当然……完成了。祝你的项目好运！

标签： javascript html canvas html5-canvas

【解决方案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>

【讨论】：

这正是我想要的。还有一个，这可以用精灵来完成吗？
您的意思是从精灵表中剪切单个精灵吗？当然，它有点复杂。 (1) 创建一个内存中的画布 (document.createElement)，大小与您的 sprite 一样，(2) 使用剪切版本的drawImage 将所需的 sprite 绘制到内存中的画布上，(3) 使用 in-内存画布作为图像源到createPattern...然后你有一个从spritesheet中剪切的sprite-pattern！祝你的项目好运！