jquery - 将 ctx.strokeStyle 与 ctx.fillStyle 一起使用

Question

我正在制作动画，使用 Canvas 根据百分比用颜色填充矩形。我能够做到这一点，但内部广场必须有 border-bottom 和 border-right。我正在使用 ctx.strokeStyle 来设置边框，但它不起作用。任何有助于弄清楚我做错了什么的帮助都将受到赞赏。谢谢!

这是工作 fiddle : 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/