Question

我正在尝试创建9个头发（头发=画布上的bezier曲线），但我正在做这个扭曲（twist =通过使用构造函数）。我正在创建9个这样的实例，其中每个实例绘制一个头发。当我这样做的时候，所有这些都会被写完，只有最后一根头发出现而不是全部9根头发。

HTML CODE:

    <canvas id="myCanvas" width="500" height="500" style="background-color: antiquewhite" ></canvas>

JAVASCRIPT：

(function() {
    hair = function() {
        return this;
    };

    hair.prototype={

     draw_hair:function(a,b,c,d,e,f,g,h){
            var sx  =136+a;
            var sy  =235+b;
            var cp1x=136+c;
            var cp1y=233+d;
            var cp2x=136+e;
            var cp2y=233+f;
            var endx=136+g;
            var endy=200+h;

         var canvas = document.getElementById('myCanvas');
         var context = canvas.getContext('2d');
         context.clearRect(0, 0,500,500);
         context.strokeStyle="grey";
         context.lineWidth="8";
         context.beginPath();
         context.moveTo(sx,sy);
         context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,endx,endy);
         context.lineCap = 'round';
         context.stroke();
         context.restore();
         context.save();
    }
};
})();

function init(){
  hd1 = new hair();
  hd1.draw_hair(0,0,0,0,0,0,0,0);

    hd2 = new hair();
    hd2.draw_hair(146,0,146,0,146,0,146,0);

    hd3 = new hair();
    hd3.draw_hair(156,0,156,0,156,0,156,0);

    hd4 = new hair();
    hd4.draw_hair(166,0,166,0,166,0,166,0);

    hd5 = new hair();
    hd5.draw_hair(176,0,176,0,176,0,176,0);

    hd6 = new hair();
    hd6.draw_hair(186,0,186,0,186,0,186,0);

    hd7= new hair();
    hd7.draw_hair(196,0,196,0,196,0,196,0);

    hd8 = new hair();
    hd8.draw_hair(206,0,206,0,206,0,206,0);

    hd9 = new hair();
    hd9.draw_hair(216,0,216,0,216,0,216,0);
 }

//init() is called on load

Answer 1

每个头发构造者都有

context.clearRect（0,0,500,500）;

将清除该区域中的所有像素，从而清除先前绘制的头发。将它移出你的头发构造函数！

希望这会有所帮助

ķ

贝塞尔曲线被构造函数覆盖？

1 个答案: