Question

我对js作为一个整体非常陌生，并且已经决定了一个很好的方式来了解整个javascript，就是按照教程来构建一个简单的分块游戏。

游戏本身运行得很好，但是，我想找到一种方法用球的图像替换js绘制的圆圈，以及任何其他矩形图像的块。

我知道（我认为）我需要实施var img = new Image() 在某种程度上，但我不完全确定如何做到这一点，而不是让我的圈子完全消失。

我相信我的代码的违规区域可能就是这个部分：

function drawBall(){
    ctx.beginPath();
    ctx.arc(x, y, ballSize, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();

然而，鉴于我是新手，我可能完全错过了它，所以我也提供了迄今为止的项目代码。 Codepen

Answer 1

绘制圆圈的代码如下：

ctx.arc(x, y, ballSize, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();

因此，您可以使用.arc方法绘制图像，而不是绘制圆圈（使用.drawImage完成）。 See docs。它看起来像这样：

ctx.drawImage(image, x, y);

图像参数是一个＆＃34;图像源＆＃34;，它可能只是HTML中的普通<img>元素。请参阅我在链接的文档中完成工作的示例。

试图用图像替换形状

1 个答案: