Question

我试图用html CANVAS标签创建一个加载栏。

我可以创建画布和条形（矩形）和所有作品，但我唯一能想出的就是如何用绿色更新条形。

我尝试过使用带有＆＃39; onclick＆＃39;调用函数

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个条形的画布，然后从左到右填充％百分比。

提前致谢

Answer 1

关于画布上的画布和绘图......

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

那是因为画布不记得＆＃34;它绘制了任何单个元素，因此无法单独移动或擦除任何元素。

由您来记住＆＃34;记住＆＃34;有关在擦除画布后重绘它的元素的足够信息。

因此，请使用以下内容删除/重绘您的进度表：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++;

}

渲染一次后，Javascript，Html5 Canvas，更新它

1 个答案: