Javascript I'；I’’我试图用一幅图像填充一个圆圈，但我用的方法都不管用

我试着把一个图像放到圆圈里，但是我试过填充/图案的东西，但什么都没用？我可能做错了，但我想尽了一切办法。有没有人对如何利用图像来实现这一点有什么想法

我希望他们能创建一个context.fillstyle=image/url选项tbh

如果你能展示如何做，以及在我写的代码中把这些代码放在哪里，那将非常有帮助，谢谢

$（文档）.ready（函数（）{
var画布=$（“#游戏画布”）；
var context=canvas.get（0.getContext（“2d”）；
//画布尺寸
var canvasWidth=canvas.width（）；
var canvasHeight=canvas.height（）；
//游戏设置
游戏；
var platformX；
var平台；
平台外缘变种；
扁形变种；
var asteroids；//包含所有小行星的数组
var播放器；
playerOriginalX变种；
var Playerooriginal；
var Players当选；
var-playerMaxAbsVelocity；
var PlayerCityDampener；
var-powerX；
var-powerY；
var评分；
//游戏用户界面
变量ui=$（“#gameUI”）；
var uiIntro=$（“#gameIntro”）；
var uiStats=$（“#gameStats”）；
变量uiComplete=$（“#gameComplete”）；
var uiPlay=$（“游戏性”）；
变量uiReset=$（“.gameReset”）；
var uiRemaining=$（“游戏剩余”）；
var uiScore=$（“.gameScore”）；
var PenguinBall=$（“#PenguinBall”）.get（0）；
var PenguinPins=$（“#PenguinPins”）.get（0）；
//类，该类定义要绘制的新小行星
var小行星=函数（x，y，半径，质量，摩擦力）{
这个.x=x；
这个。y=y；
这个半径=半径；
这个质量=质量；
摩擦=摩擦；
该值为0.vX=0；
这是0.vY=0；
this.player=false；
};
//重置播放器
函数resetPlayer（）{
player.x=playerOriginalX；
player.y=最初的玩家；
player.vX=0；
player.vY=0；
};
//重置并开始游戏
函数startName（）{
//重置游戏统计信息
html（“0”）；
uiStats.show（）；
//设置初始游戏设置
游戏=假；
platformX=画布宽度/2；
平台度=150；
平台外径=100；
扁平线=75；
小行星=新阵列（）；
PlayerOrginalx=画布宽度/2；
playerOriginalY=画布高度-150；
playerSelected=假；
playerMaxAbsVelocity=30；
playerVelocityDampener=0.3；
powerX=-1；
powerY=-1；
得分=0；
//设置玩家小行星
pRadius变量=15；
var-pMass=10；
var p摩擦=0.97；
player=新小行星（playerOriginalX、playerOriginalY、pRadius、pMass、pFriction）；
player.player=true；
小行星。推（玩家）；
//建立其他小行星
var outerRing=8；//外环周围的小行星
var ringCount=3；//环数
var ringSpacing=（Platforminerradius/（ringCount-1））；//每个环之间的距离
对于（var r=0；r  context.save();
  context.beginPath();
  context.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI * 2, true);
  context.closePath();
  context.clip();

  context.drawImage(img, tmpAsteroid.x - img.width / 2, tmpAsteroid.y - img.height / 2, 50, 50);

  context.beginPath();
  context.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI * 2, true);
  context.clip();
  context.closePath();
  context.restore();