Javascript，Html5 Canvas渲染一次后，对其进行更新

debugcn 发表于 Dev

罗克

我试图用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个小节的画布，然后按从左到右的百分比填充它们。

提前致谢

品牌

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

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

这是因为画布不会“记住”它绘制任何单个元素的位置，因此无法单独移动或擦除任何元素。

擦除画布后，由您“记住”有关元素的足够信息以重绘该元素。

因此，请使用类似以下内容来擦除/重新绘制进度表：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++;

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。