0

我正在尝试创建 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
4

1 回答 1

0

每个头发构造器都有

context.clearRect(0, 0,500,500);

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

希望这可以帮助

ķ

于 2013-06-05T14:44:40.953 回答