复习JS高级
1、构造函数
如果一个函数配合new关键字创建对象，那么这个函数就可以称之为构造函数。
构造函数有个潜规则，就是函数名首字母为大写。
2、实例
在口头描述中，通过构造函数创建的对象就叫实例。
3、继承
继承是指一个对象可以使用另一对象的属性与方法。
4、prototype
函数默认含有的一个属性。
- 通过函数new出来的实例，都会继承这个属性所指向的原型对象。
5、proto
对象默认含有的一个属性。
- 表示该对象所继承的原型对象。
6、继承方式1 - 默认的原型继承
// 构造函数Fn
function Fn() {}
// 给Fn默认的原型中添加一个value属性
Fn.prototype.value = 100;
// 通过Fn创建一个obj实例
var obj = new Fn();
// 因为实例继承Fn.prototype，所以可以使用value属性
console.log(obj.value);
7、继承方式2 - 覆写构造函数的原型
// 构造函数Fn
function Fn() {}
// 重写Fn的原型为一个字面量对象
Fn.prototype = {
value: 100
}
// 通过Fn创建一个obj实例
var obj = new Fn();
// 因为实例继承Fn重写后的原型对象，所以可以使用value属性
console.log(obj.value);
8、继承方式3 - 给原型混入
// 实现混入的函数
function extend(o1, o2) {
for ( var key in o2 ) {
o1[key] = o2[key];
}
}
// 构造函数Fn
function Fn() {}
// 给Fn默认的原型中混入字面量对象的value属性，
// 这样Fn.prototype里也有了value属性。
extend(Fn.prototype, {
value: 100
});
// 通过Fn创建一个obj实例
var fn = new Fn();
// 因为实例继承Fn.prototype，所以可以使用value属性
console.log(obj.value);
9、继承方式4 - Object.create
var o = { value: 100 }
// 创建一个继承o对象的新对象
var newObj = Object.create(o);
10、继承方式5 - 构造函数借用(属性继承)
// 动物构造函数
function Animal(name, age) {
this.name = name;
this.age = age;
}
// 猫构造函数
function Cat(name, age) {
// 借用Animal函数给Cat实例添加属性
Animal.call(this, name, age);
}
// 创建猫实例boSi
var boSi = new Dog('波斯', 2);
// 实例boSi拥有name、age属性值
console.log(boSi);
新内容-画布
第一天
1.入门
- canvas是一个用来展示绘图效果的标签，它和img类似，都是行内块元素
- 同一个页面可以拥有多个canvas标签
- 画布默认300*150，要设置画布的宽高，需要借助canvas元素的属性
- 画图的步骤：
- 先移动钢笔到指定的位置 ctx.moveTo( x轴移动的坐标，y轴移动的坐标 )
- 开始画线条 ctx.lineTo( x轴移动的坐标，y轴移动的坐标 )
- 线宽设置 ctx.lineWidth = 6; ==线宽放在绘制之前==
- 颜色设置 ctx.strokeStyle = 'blue';
- 描边路径 ctx.stroke()
2.基本设置
- 根据当前路径进行填充
- context.fill();
- 清除路径
- context.beginPath();
- 闭合路径
- 从当前路径的结束点到起始点连一条路径
- 有了闭合路径，最后一条线就可以不画
- context.closePath();
- 清除画布
- context.clearRect(x, y, w, h);
- 画矩形路径
- context.rect(x, y, w, h);
- 画描边矩形
- 该方法不会产生任何路径
- context.strokeRect(x, y, w, h);
- 画填充矩形
- 该方法不会产生任何路径
- context.fillRect(x, y, w, h);
- 设置线条虚实样式
- context.setLineDash([5, 3...]);
- 获取线条虚实样式
- context.getLineDash();
3.Context属性
- 描边色
- context.strokeStyle = 颜色值;
- 填充色
- context.fillStyle = 颜色值;
- 线宽
- context.lineWidth = 10;
- 线帽
- 默认值为butt。
- context.lineCap = 'butt' || 'round' || 'square';
- 线交点
- 默认值为miter。
- context.lineJoin = 'miter' || 'round' || 'bevel';
- 虚线偏移量
- context.lineDashOffset = 5;
4.非零环绕原则
- 是用来判断哪些区域属于路径内( 计算结果非0，即为路径内 )。
- 在路径包围的区域中，随便找一点，向外发射一条射线，和所有围绕它的边相交，然后开启一个计数器，从0计数
- 如果这个射线遇到顺时针围绕，那么+1，如果遇到逆时针围绕，那么-1，
- 如果最终值非0，则这块区域在路径内。
- 备注：基数边的区域一定在路径内。
5.填充和描边的顺序问题
- 描边的时候，会占用原图形的一部分( 线宽的一半 )。
- 所以，日常开发中，为了让线宽符合要求，
- 最好先填充，再描边，防止填充时覆盖掉线宽的一半。
6.canvas在绘制线条的机制
- 会向左向右偏移线宽的一半，然后进行绘制
- 如果线宽为奇数，那么边缘的颜色值，会缩减一半
