使用 Javascript 在 HTML5 中重绘 Canvas答案

【问题标题】：Redrawing Canvas in HTML5 using Javascript使用 Javascript 在 HTML5 中重绘 Canvas
【发布时间】：2012-07-31 05:00:44
【问题描述】：

我正在创建一个点击清除游戏。一旦用户点击了一些砖块，其相邻的砖块就会被检查为相同的颜色，并且所有这些砖块都会被立即清除。

这些是使用 clearRect() 函数清除的。

现在这会在上面的砖块和下面的砖块之间留下一个白色的补丁，让上面的砖块悬空。

现在我想将上面的这些砖块向下移动。我该怎么做呢..？请帮忙

【问题讨论】：

请更清楚地提及您的问题。如果可能，发布示例代码。
我想创建一个类似this 的游戏，但点击后我的积木仍然悬空。我想把他们调低
MarcoK 在这里完美地回答了您关于如何重绘画布的问题。我建议开始另一个更详细的问题，以及关于让你的“砖块”倒下的当前代码示例。

标签： javascript html canvas

【解决方案1】：

这个问题很模糊，但根据标题，您需要先清除画布，然后才能重绘。否则，绘制的元素将简单地堆叠在一起。

为此，请在画布本身上调用函数clearRect：

function clear() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 500, 500);
}

canvas 是画布的 ID，500, 500 是尺寸。现在您将拥有一个空画布，您可以在其中重新绘制所有内容。

我也曾经创建过a simple HTML5 canvas game，你可以从源码中学习。

【讨论】：

【解决方案2】：

我想我明白你在问什么。如果是这样，那么您想知道在移除下面的块后如何将这些块向下移动。

这只是在游戏循环的每次迭代中增加 x 位置（记住画布从 0,0 开始）的问题。

增加多少？那将是最高的“实心塔”所在的地方。即，假设您有一列 10 个标记，然后删除了 7 个。下面的 3 个需要全部下降到剩余 6 个的高度 - 所以这将是 board height - (6*token height)

*
*
*
+ <- remove
* <- 6x token height (and less the board height)
*  
*  
*
*
*

【讨论】：

【解决方案3】：

我成功地通过 DOM 重绘 HTML Canvas。

    var c = document.getElementsByName("myCanvas")[0];

    if (c != null)
    {
        c.remove();
    }

    var c = document.createElement("canvas");
    c.setAttribute("name", "myCanvas");
    c.setAttribute("width", 900);
    c.setAttribute("height", 600);
    c.setAttribute("style", "border:1px solid #d3d3d3");

【讨论】：