Javascript , Html5 Canvas 渲染一次后，更新一下答案

【问题标题】：Javascript , Html5 Canvas after rendering once, update itJavascript , Html5 Canvas 渲染一次后，更新一下
【发布时间】：2014-08-01 23:59:08
【问题描述】：

我正在尝试使用 html CANVAS 标记创建加载栏。

我可以创建画布和条形（矩形），一切正常，但我似乎唯一想不通的是如何用绿色更新条形。

我尝试过使用带有“onclick”功能的按钮来调用该函数

function drawbars(ctx){
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
}

但这无济于事。

然后我想在每次必须绘制条形时清除画布，然后我找不到为每个加载的百分比绘制正确数量的条的方法。

这就是我现在所拥有的......

-一个用 100 个矩形绘制画布的函数，例如这很好用。

for (var n = 0; n < 100; n++){
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(x+margin,0,5,25);
}

-我认为这会用不同的颜色更新画布中的每个条形（矩形）。

ctx.fillStyle = "#FF0000";

问题仍然存在：如何创建一个有 100 个条的画布，然后从左到右按 % 百分比填充它们。

提前致谢

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

关于 Canvas 和 Canvas 上的绘图...

当画布上的任何现有绘图需要更改（重新着色、调整大小移动、擦除等）时，标准方法是完全擦除画布并使用新大小和位置的元素重新绘制画布（或不重新绘制元素（如果它们被删除）。

这是因为 canvas 不“记住”它在哪里绘制了任何单个元素，因此无法单独移动或擦除任何元素。

您可以“记住”有关元素的足够信息，以便在画布被擦除后重新绘制它。

所以使用这样的东西来擦除/重绘你的进度条：http://jsfiddle.net/m1erickson/XM5ZH/

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var margin=2;
var cellWidth=3;
var cellHeight=5;
var progress=1;

animate();

function drawProgress(completeColor,incompleteColor,completeCount){

    ctx.clearRect(0,0,canvas.width,canvas.height);

    for (var n = 1; n < completeCount; n++){
        ctx.fillStyle = completeColor;
        ctx.fillRect(n*cellWidth+margin,50,cellWidth,cellHeight);
    }    

    for (var n = completeCount; n < 100; n++){
        ctx.fillStyle = incompleteColor;
        ctx.fillRect(n*cellWidth+margin,50,cellWidth,cellHeight);
    }    

}

function animate(){

    if(progress<100){ requestAnimationFrame(animate); }

    drawProgress("green","red",progress);

    progress++;

}

【讨论】：