[英]How can I redraw a canvas dashboard every 5 minutes?
如何每 5 分鍾重繪一次畫布？ 我在畫布上畫了一個弧形儀表板，但是當我重新繪制它時，我的畫布會變得很臟。
我需要這個儀表板每 5 分鍾用隨機值重新繪制一次。
我怎樣才能做到這一點？
function dashboards() { var porcent= 80;// it is variable % // start o dashboard var canvas = document.getElementById("dash"); var ctx = canvas.getContext('2d'); var graus = (porcent * 360) / 100; // convert porcent to degree var radians = (Math.PI / 180) * graus;// convert degree to radius // start back grey var canvas_fundo = document.getElementById('dash'); var ctx_fundo = canvas_fundo.getContext('2d'); var graus_fundo = 360 // degree var radians_fundo = (Math.PI / 180) * graus_fundo;// convert degree to radius ctx_fundo.strokeStyle = '#D3D3D3';// color border grey ctx_fundo.beginPath();// start draw ctx_fundo.lineWidth = 20;// width border ctx_fundo.arc(110, 110, 95, 0, radians_fundo, false);// do circle ctx_fundo.stroke();// do border //end back grey if (porcent <= 40) { ctx.strokeStyle = '#FF0000';// color border red } else if ((porcent > 40) && (porcent < 70)) { ctx.strokeStyle = '#FFD700';// color border yellow } else { ctx.strokeStyle = '#32CD32';// color border green } ctx.beginPath();// start draw ctx.lineWidth = 20;// width border ctx.arc(110, 110, 95, 0, radians, false);// do circle ctx.stroke();// do border ctx.font = '28px arial';// font text ctx.textAlign = 'center';// position ctx.fillText(porcent.toFixed(1) + '%', 112, 120);// text and your possition // end dashboard } dashboards();
<!DOCTYPE html> <html> <head></head> <body> <div> <canvas id="dash" height="300"></canvas> </div> </body> </html>
它被抹去
在儀表板功能的開頭添加一個清晰的畫布，並將porcent變量添加為該函數參數
那么你可以每 5 分鍾用 setInterval 調用一次dashboard(Math.random() * 100)
我對您的代碼進行了一些更改，添加了 5 秒的間隔，只需將時間間隔更改為您想要的分鍾，添加一個生成隨機整數的函數，然后將其傳遞給儀表板函數，我還添加了 ctx.clearReact() 來清除畫布中心的文本百分比。 看下面的代碼...
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<canvas id="dash" height="300"></canvas>
</div>
</body>
<script>
function dashboards(percent) {
var porcent= percent;// it is variable %
var ctx = null;
// start o dashboard
var canvas = document.getElementById("dash");
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear the canvas
var graus = (porcent * 360) / 100; // convert porcent to degree
var radians = (Math.PI / 180) * graus;// convert degree to radius
// start back grey
var canvas_fundo = document.getElementById('dash');
var ctx_fundo = canvas_fundo.getContext('2d');
var graus_fundo = 360 // degree
var radians_fundo = (Math.PI / 180) * graus_fundo;// convert degree to radius
ctx_fundo.strokeStyle = '#D3D3D3';// color border grey
ctx_fundo.beginPath();// start draw
ctx_fundo.lineWidth = 20;// width border
ctx_fundo.arc(110, 110, 95, 0, radians_fundo, false);// do circle
ctx_fundo.stroke();// do border
//end back grey
if (porcent <= 40) {
ctx.strokeStyle = '#FF0000';// color border red
} else if ((porcent > 40) && (porcent < 70)) {
ctx.strokeStyle = '#FFD700';// color border yellow
} else {
ctx.strokeStyle = '#32CD32';// color border green
}
ctx.beginPath();// start draw
ctx.lineWidth = 20;// width border
ctx.arc(110, 110, 95, 0, radians, false);// do circle
ctx.stroke();// do border
ctx.font = '28px arial';// font text
ctx.textAlign = 'center';// position
//ctx.clearRect(50, 50, 112, 120); //clear text in your position
ctx.fillText(porcent.toFixed(1) + '%', 112, 120);// text and your possition
// end dashboard
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
setInterval(function () {
dashboards(getRandomInt(1, 100));
}, 5000);
</script>
</html>
如何重繪畫布（每250ms），每次重繪之間沒有閃爍？
[英]How to redraw canvas (every 250ms) without flickering between each redraw?
如何每x秒在另一個畫布或圖像的頂部重畫一個畫布？
[英]How do you redraw a canvas on top of another canvas or image every x seconds?
在這種情況下，如何在HTML5畫布上重畫一個圓？ （方法調用與直接使用上下文對象相比）
[英]how can I redraw a circle on an HTML5 canvas in this specific case? (method call versus directly using context object)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.