13-画布

复习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在绘制线条的机制

• 会向左向右偏移线宽的一半，然后进行绘制
• 如果线宽为奇数，那么边缘的颜色值，会缩减一半