用构造函数重写贝塞尔曲线
bezier curve getting overwritten by using constructor?
我试图创建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相关文章:
- ES6构造函数返回基类的实例
- 使用Google Visualization动态调用构造函数
- javascript中对象构造函数中的var属性与this.properties
- 理解typescript中的构造函数接口
- 为什么构造函数不是构造函数
- 如果在构造函数中有“返回”,则在 JavaScript 中的新运算符中做了什么
- 拦截对构造函数的调用
- 使用闭包共享构造函数参数
- 文本表示法VS.构造函数,用于在JavaScript中创建对象
- 从js引擎的角度来看闭包和构造函数是如何工作的
- 如何使用此从对象访问构造函数
- Javascript:为什么是构造函数's __proto__属性Empty(){}
- 当一个重要的构造函数参数丢失时应该发生什么
- Chrome Javascript日期构造函数错误
- 如何使用构造函数's的输出,以便将值插入到对象中
- 为什么在调用父构造函数时在[]中发送数据
- 构造函数函数闭包变量
- ES6类是否与构造函数相同
- 构造函数中的事件处理程序与构造函数外的事件处理函数的行为不同
- 用构造函数重写贝塞尔曲线