생성자를 사용하여 베 지어 곡선을 덮어 쓰시겠습니까?

Question

저는 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 

Answer 1

모발 생성자가

context.clearRect (0, 0,500,500)를 가지고;

이 영역에서 모든 픽셀을 지우고 이전에 그려진 머리카락을 지 웁니다. 머리카락 생성자에서 그것을 움직여 라! ! 그래서 바보 나 일을 들으 .. :

희망이

K