使用Javascript在HTML5中重绘画布 [英] Redrawing Canvas in HTML5 using Javascript

问题描述

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

这些是使用clearRect（）函数清除的。 / p>

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

现在我想把这些砖块向下拉。我该怎么做呢..？
Plz帮助

解决方案

问题很模糊，但根据标题，你需要清除你的画布之前你可以重绘。否则，绘制的元素将简单地叠加在一起。

要执行此操作，请调用函数 clearRect 在画布上：

  function clear（）{
 var canvas = document.getElementById（canvas）; 
 var ctx = canvas.getContext（2d）; 
 ctx.clearRect（0,0,500,500）; 
} 
  

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

我曾经创建过一个简单的HTML5画布游戏，您可以从源代码中学习。

I am creating a click and clear game. Once the user clicks some brick its adjacent bricks are checked for same color and all these bricks are bricks are cleared at once.

These are Cleared using clearRect() function.

Now this leaves a white patch right between the bricks above and bricks below leaving the above bricks hanging.

Now i want to bring these bricks above downward. How do i do this..? Plz help

解决方案

The question is quite vague, but based on the title, you'll need to clear your canvas before you can redraw. Otherwise, the drawn elements would simply stack on top of each other.

To do this, call the function clearRect on the canvas itself:

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

Where canvas is the ID of your canvas, and 500, 500 the dimensions. Now you'll have an empty canvas where you can redraw everything again.

I once created a simple HTML5 canvas game as well, you might learn from the source code.

这篇关于使用Javascript在HTML5中重绘画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！