Javascript 更改填充样式以将图像添加到游戏对象

我现在有一个游戏，当我使用context.fillStyle时，它会发射一个灰色的加农炮，但我想使用图像而不是颜色。使用createPattern，我得到一个黑色的加农炮（而不是图像），当加农炮开火时，我得到了重复的img标签，控制台记录了徽标。（显示其更新）：

```
if（炮弹屏幕）
{
//context.fillStyle=灰色
createPattern（徽标“repeat”）；
context.beginPath（）；
弧（炮弹.x，炮弹.y，炮弹半径，
0，Math.PI*2）；
closePath（）；
context.fill（）；
} 

正如错误所说，需要两个参数，第二个是repeat类型。 请尝试以下方法：

var logo=新图像（）；
logo.src='yourFilePath'；
logo.onload=函数（）{
context.createPattern（logo'no repeat'）；//或'repeat'或'repeat-x'或'repeat-y'
};

谢谢您，先生。然而，这消除了错误，它实际上并没有将图案添加到canonball对象？我想它可能没有正确地把它拉进去。当我在控制台上记录炮弹时，我得到了img src路径的一致更新…看看关于createPattern的链接，它不支持第一个参数只是一个路径，你需要给它一个img元素或ImageBitmap对象。@SirNail我已经添加到了答案中，还可以使用document.querySelector选择添加到问题a徽标变量的图像标记

    <img src="cannonball.jpg"> ```



    if (cannonballOnScreen)
   {
      // context.fillStyle = gray
      context.createPattern(logo, 'repeat');
      context.beginPath();
      context.arc(cannonball.x, cannonball.y, cannonballRadius,
         0, Math.PI * 2);
      context.closePath();
      context.fill();
   }