用构造函数重写贝塞尔曲线

bezier curve getting overwritten by using constructor?

本文关键字:曲线 构造函数 重写      更新时间:2023-09-26

我试图创建9根头发(头发=画布上的贝塞尔曲线),但我这样做是有一个扭转(扭转=使用构造函数)。我创建了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

每个毛发构造器都有

上下文。clearRect (0, 0500500);

将清除该区域中的所有像素,从而清除先前绘制的头发。把它从你的头发构造器中移开!

希望对您有所帮助

K