js+面向对象+html5+canvas相关笔记（一）

1.Canvas是Html5提供的一个展示绘图效果的标签<canvas></canvas>
◆使用canvas标签，即可在页面中开辟一个区域，可以设置width和height来设置该区域的尺寸
◆默认canvas的宽高为300和150
◆不要使用css的方式设置宽高，应该使用html属性
◆如果浏览器不支持canvas标签，那么就会将其解释为div标签，因此常常在canvas中嵌入文本，以提示用户浏览器的能力
◆canvas的兼容性非常强，只要支持该标签的，基本功能都一样，因此不用考虑兼容性的问题
◆canvas本身不能绘图，是要使用javascript来完成绘图，canvas对象提供了各种绘图用的api。


2.canvas的使用领域
◆游戏
◆可视化数据
◆banner广告
◆多媒体
◆未来
◇模拟仿真
◇远程操作
◇图形编辑


3.基本绘图
◆获得canvas对象
◆调用getContext方法，提供字符串参数"2d"
◆该方法会返回CanvasRenderingContext2D 类型的对象，该对象提供基本的绘图命令
◆使用CanvasRenderingContext2D 对象提供的方法进行绘图
◆基本绘图命令【
◇设置开始绘图的位置：context.moveTo(x,y)
◇设置直线到的位置：context.lineTo(x,y)
◇描边绘制：context.stroke()
◇填充绘制：context.fill()
◇闭合路径：context.closePath()//调用了这个方法后，你画的的线条就会自动进行闭合处理，不需要你亲自画一条闭合的线了。
】


3.绘图的属性
◆context.moveTo(200,50)：起始点坐标设置
◆context.lineTo(50,200)：直线要到的位置
◆context.lineWidth=5：线条的宽度
◆context.strokeStyle="#f00"：绘制线条时线条的颜色
◆context.stroke()：描边绘制
◆context.fillStyle="#0f0"：填充特定形状时的颜色
◆context.fill()：填充颜色，把当前路径环绕起来的区域进行填充
◆context.closePath()：闭合你绘制的图画的路径
◆context.beginPath()：为了防止重新绘制之前的路径，所以先把之前的路劲清除掉


4.路径的描述
◆在canvas中使用各种方法描点实际上描述的是一个称为路径（path）的东西。
◆在canvas绘图中，所有描述的东西都是路径，只有最后填充或描边的时候才会显示出效果
◆填充必须满足非零环绕原则
◆每一个路径都是一个状态
◆


5.非零环绕原则
◆ 是用来判断哪些区域属于路径内( 计算结果非0，即为路径内 )。
◆ 在路径包围的区域中，随便找一点，向外发射一条射线，
◆ 和所有围绕它的边相交，
◆ 然后开启一个计数器，从0计数，
◆ 如果这个射线遇到顺时针围绕，那么+1，
◆ 如果遇到逆时针围绕，那么-1，
◆ 如果最终值非0，则这块区域在路径内。
◆ 备注：奇数边的区域一定在路径内。


6.描边的时候注意
◆描边的时候，会占用原图形的一部分，lineWidth线宽值的一半。
◆日常开发中，为了让线宽符合要求，最好先填充，再描边，防止填充时覆盖掉线宽的一半。
◆stroke描边时，lineWidth的值，会是内外各半，如果lineWidth值为6，那么内部是3像素的边，外部也是3像素的边，并且，如果是后填充的话，填充会占据内部的3像素，所以请先填充再描边。


7.canvas在绘制线条的时候，会向左向右偏移线宽的一半，然后进行绘制，如果线宽为奇数，那么边缘的颜色值会缩减一半。


8.线条的样式
◆context.lineCap：线帽的样式【
◇butt：默认值，线头的两端是方的
◇round：线头两端各增加线宽的一半，线头两端是圆的，变长了，变成的长度就是线宽的值，并且两端圆的半径就是线宽一半。
◇square：线头两端各增加线宽的一半，线头两端是方的，但是线变长了，变长的长度就是线宽的值。

】
◆context.lineJoin：线接的样式，两条线交点的样式【
◇miter：默认值,两边相连为尖尖角，斜切
◇round：把默认的尖尖角磨成圆头的了
◇bevel：两边相连为一个斜面，就是把吧默认的尖尖角换成平面了
】
◆线的交点与线帽无不干扰。


9.画布中的内置API
◆绘制一个矩形的路径：context.rect(startX,startY,width,height);，画的只是一个路径，需要你自己调用context.stroke()描边或者context.fill()填充。
◆绘制一个描边的矩形：context.strokeRect(startX,startY,width,height);，这个方法不会产生任何路径
◆绘制一个填充的矩形：context.fillRect(startX,startY,width,height);，这个方法不会产生任何路径
◆清除指定矩形区域内的内容：context.clearRect(startX,startY,width,height);，这个方法会清除画布中指定区域内的内容


10.绘制虚线
◆设置画线的时候空白部分和实线部分的大小（绘制虚线时的规则）：context.setLineDash([5,4]);，数组中的第一个值为实线部分的长度，第二个值为空白部分的长度，如果只设置一个值，那么实现部分和空白部分一样，实线部分和空白部分会按照数组中的元素的值进行排列划分的。
◆获取绘制虚线时的规则：context.getLineDash();，返回值就是数组
◆设置虚线绘制时的偏移量：context.lineDashOffset=3，开头处会偏移3像素


11.绘制坐标系
◆定义上下左右pandding的对象
◆定义上边点的x、y的vertexTop对象
◆定义原点的x、y的vertexOrigin对象
◆定义右边点的x、y的vertexRight对象
◆在坐标系中画点可以使用 定义的原点对象来作为参照点，使用系统内置的fillRect方法来画点。