Question

我希望每隔x秒刷新一次画布，而不刷新整个页面。

<script>

$(document).ready(function ()
{
    var odo = new RGraph.Odometer({
        id: 'cvs',
        min: 0,
        max: 360,
        value: <?php echo $windDirDeg; ?>
    }).draw();
 </script>

<body>
 <canvas id="cvs" width="300" height="300"></canvas>
</body>

Answer 1

要清除画布，您可以使用RGraph API：

var ca = document.getElementById('cvs');
RGraph.clear(ca, 'white'); // The colour is optional (the default is transparent)

http://www.rgraph.net/docs/api.html

Answer 2

可能是这样的：

x = 3000ms

setInterval(function(){ 
context.clearRect(0, 0, canvas.width, canvas.height);
alert("Canvas cleared"); 
}, 
3000);

完整示例：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
setInterval(function(){ 
ctx.clearRect(0, 0, c.width, c.height);
alert("Canvas cleared"); 
}, 
3000);
</script>

</body>
</html>

请参阅此example

如何在x秒后刷新画布

2 个答案: