使用ctx.strokeStyle和ctx.fillStyle

Question

我正在使用画布制作动画，根据百分比填充矩形颜色。我能够做到这一点，但内部广场必须有边界底部和边界-右。我正在使用ctx.strokeStyle给出边界，但它不起作用。任何帮助我搞清楚我做错了什么，我们都很感激。谢谢!

这是工作的小提琴：http://jsfiddle.net/2n6kduL4/22/

HTML

<div id="mydiv">
    <canvas id="Rectangle1" width="100" height="100" style="border:1px solid #d3d3d3;background:#7392a8;">Your browser does not support the HTML5 canvas tag.</canvas>
    <canvas id="Rectangle2" width="100" height="100" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <canvas id="Rectangle3" width="100" height="100" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
    <canvas id="Rectangle4" width="100" height="100" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
</div>

JQUERY

(function(){
   for (j = 1; j < 5; j++) {
       var myTime = {};
        myTime[1] = 0.5;
        myTime[2] = 0.9;
        myTime[3] = 0.1;
        myTime[4] = 0.5;
       (function(){
           var canvas = document.getElementById('Rectangle' + j);
       //console.log(canvas);
       //var ctx = document.getElementById(canvas)[k].getContext('2d');
       var ctx =canvas.getContext('2d');
       //console.log(ctx);
       var myPerc = 100;
       ctx.fillStyle = "rgb(255, 255, 255)";
       ctx.fillRect(0, 0, myPerc, myPerc);
       ctx.save();
       for (var i = 0; i < (myPerc * myTime[j]); i++) {            
           ctx.fillStyle = "rgb(0, 255, 0)"; //greeen
           ctx.strokeStyle = 'rgb(0,0,0)';
           ctx.lineWidth   = 4;
           ctx.stroke();
           console.log("before", ctx);
           // ctx.fillRect(0, 0, +i, +i);
           (function (i) {                 
               setTimeout(function () {
                   console.log(ctx, j);
                   ctx.fillRect(0, 0, +i, +i);
               }, 50 * i);
           })(i);
       }
       })();
   }
})();

谢谢你，普拉瓦利卡

Answer 1

您只调用fillRect，所以它只是填充矩形，而不是绘制边框。填充strokeRect之后，尝试添加一个对它的调用。

http://jsfiddle.net/vpzomtrrfrt/2n6kduL4/23/