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);
       }
       })();
   }
})();

谢谢， Pravallika

Answer 1

您只是致电fillRect，因此它只填充矩形，而不是绘制边框。填写后尝试添加对strokeRect的调用。

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

使用ctx.strokeStyle和ctx.fillStyle

1 个答案: