1.Canvas的使用注意 A.要在页面中添加一对canvas标记，默认占300*150的区域 B.我们可以通过html属性‘width’，‘height’来设置canvas的宽高，不可以通过css属性来设置宽高。 C.Canvas相当于是一张白纸，如果想要在这个白纸上绘图，你需要一套绘图工具 获取绘图工具的方式：var ctx = Canvas.getContext(‘2d‘);
练习：
2.Canvas绘制会用到的方法 ctx.moveTo(x,y):将绘图工具移动到x,y坐标点 ctx.lineTo(x,y):将绘图工具从上一个点到x,y点虚描一条线 ctx.stroke():将虚描的内容使用实线绘制出来。 ctx.fill();在绘制好的图形中填充颜色（默认黑色）. fill会将起始点（moveTo）和结束点(最后一个lineTo)连起来，然后在形成的图形中填充黑色。 ctx.closePath():将绘图的起始点绘图的结束点进行连接，最后闭合图形。 ctx.beginPath():开启新路径。 ctx.setLineDash([数组]) :设置虚线的数组，当划线的时候采用这个数组中的数字作为虚线的数据 ctx.getLineDash():获取虚线的数组
Canvas绘制使用到的属性： ctx.lineWidth = 10; 设置绘图的线宽 ctx.lineCap = "round"; 设置线帽 ctx.lineJoin = ‘round‘; 设置线拐 ctx.lineDashOffset = 值; 设置虚线的缩进 ctx.strokeStyle = ‘red‘; 设置描边的颜色 ctx.fillStyle =‘green‘; 设置填充的颜色
3.非零环绕原则：如果想要对一块区域进行填充，我们需要使用非零环绕原则来判断是否进行填充 在这一块区域随便选一个点，随便向任意方向拉出去到外面的一个L线， 此时如果画的图的线条穿过L线时是顺时针的，那么就记做+1 此时如果画的图的线条穿过L线时是逆时针的，那么就记做-1 最后把所有记录的值进行求和，如果为0，代表不填充，其他情况要填充。
4.线宽的问题：Canvas在进行绘制线条的时候，如果线宽只要奇数值都会去做取消锯齿，比如说lineWidth设置为9，中心很黑的芯就是8px，两边各1px的淡淡的灰色的模糊边缘。 线宽的中心才是线的起始位置
5.closePath 和 lineTo进行闭合的区别： closePath进行图形的闭合会是完美闭合， lineTo进行图形的闭合的时候，如果线宽比较宽的情况下，看起来就有问题。
结论：以后如果要闭合图形请使用closePath();
6.开启新路径：绘图的时候会设置线宽，线颜色，填充，划线， 如果想要有多个状态的图形存在，我们必须开启新路径。 先画一个填充的图形 fill()
开启新路径; 然后又画一个线条图形 stroke();
7.如何使用面向对象的方式进行编程： （1）.找找看有没有系统对象或者第三方库可以帮助你完成功能 （2）.如果没有，那么我们需要自己来创建这样一个对象来完成这个功能 A.想要创建这个对象，先要创建这个对象的构造函数 B.通过构造函数的参数我们把对象需要使用到的数据传递，赋值给对象 C.把我们需要实现的功能设置为原型的方法，这样的话，所有构造函数创建出来的对象都有这个功能方法了。 D.new 一个对象，调用对象的功能方法完成功能。
————————————————————————————————————————
1. 什么是 Canvas 就是 HTML 5 给出的一个可以展示绘图内容的标签. 最早是 苹果公司 提出的该标签.
threejs.org 里面有汽车等 3D 的仿真
2. 基本使用 1> 提供 Canvas 标签即可. 默认就会占据 300 * 150 的区域 2> 利用 html 属性为它设置宽高. 不要使用 CSS 来设置. 使用 属性设置 canvas 标签的宽高, 实际上相当于增加了 canvas 画布的像素 但是如果使用 CSS 来设置画布的大小, 那么不会增加像素点, 只是将像素扩大了 3> Canvas 只能展示绘图的内容. 但是不能进行绘图 利用 Canvas 找到绘图工具 每一个 Canvas 都有一套工具, 利用工具可以在当前 Canvas 上进行绘图 使用语法 canvas.getContext( ‘2d‘ ) 就返回一个在当前画布上绘图的工具集 这个工具集专门绘制 平面图形. 如果要绘制 立体的图形需要传入 ‘webgl‘ 绘制 平面图形的 对象是 CanvasRenderingContext2D 类型的 4> 开始绘图 首先需要绘制点, 然后需要将这些点描边吗才可以看到东西
3. 绘图的坐标系 在绘图板上描述出下列点的位置
( 100, 100 ), ( 0, 100 ), ( 100, 0 ), ( -10, 100 ), ( 100, -10 )
4. 绘图的常用方法 ctx.moveTo( x, y ) 将绘图的起始点设置为 x,y ctx.lineTo( x, y ) 从当前位置, 绘制直线到 x,y ctx.stroke() 就是将刚刚绘制的所有的点联系起来. 就可以看到图形了.
5. 绘制方法 ctx.stroke() ctx.fill() 调用 fill 方法会将所有的点连接起来, 并构成一个封闭的图形结构 如果所有的描点没有构成封闭结构, 也会将开始的起点, 与最终的点 连接起来, 构成一个闭合的图形, 并在里面填充颜色(默认黑色)
6. 非零环绕原则 如果需要判断某一个区域是否需要填充颜色. 就从该区域中随机的选取一个点. 从这个点拉一条直线出来, 一定要拉到图形的外面. 此时以该点为圆心. 看穿过拉出的直线的线段. 如果是顺时针方向就记为 +1, 如果是 逆时针方向, 就记为 -1. 最终看求和的结果. 如果是 0 就不填充. 如果是 非零 就填充.
7. 闭合路径 closePath()
lineWidth 设置绘制图形的线宽
closePath 与 直接使用 lineTo 闭合是有区别的
8. Canvas 中绘图是有状态的 背景 粉色 正方形 红色 边框 蓝色
Canvas 绘图是含有状态的, 在需要改变颜色, 绘制方法, 改变一些属性... 就需要 改变绘图状态. 使用 beginPath() 方法. 开启一个新的路径.
9. 虚线 ctx.setLineDash( 数组 ) ctx.getLineDash() ctx.lineDashOffset = 值
数组中存储的数字就是分别表示 实线部分与空白部分的长度 [ 10 ]
10. 如何设置描边与填充的颜色 ctx.strokeStyle 设置描边的颜色 ctx.fillStyle 设置填充的颜色
11. 将直线进行封装 function Line () {}
var line = new Line( x0, y0, x1, y1 ); line.stroke();
————————————————————————————————————————————
1. 绘制折线图 假设有点: ( 10, 20 ), ( 15, 13 ), ( 17, 30 ), ( 30, 10 ), ( 20, 15 ) 将这些点绘制到坐标轴中.
2. 绘制形状 -> 矩形 ctx.rect( x, y, width, heigth ) 描边, 需要 stroke 或 fill ctx.strokeRect( x, y, w, h ) ctx.fillRect( x, y, w, h ) ctx.clearRect( x, y, w, h ) 清除该矩形区域的内容
-> 清除整个画布 ctx.clearRect( 0, 0, cas.width, cas.height );
cas.width = cas.width;
-> 圆弧 ctx.arc( x, y, r, startAngle, endAngle, clockwise ) ctx.arcTo() 了解
3. 弧度制 为了更好的计算角度, 我们该角度提供一个新的定义, 用 PI 作为单位 将单位圆的一个整圈( 360 度 )记作 2 倍 的 PI.
这样的度量表示就是弧度制的表示方法.
60 度 PI / 3 45 度 PI / 4 30 度 PI / 6
学会进行转换
2 PI 刚好是一圈 一圈又是 360 度
2 PI 比上 360 度 = 弧度 比上 对应的角度
angle 角度 radian 弧度
function toAngle ( radian ) { return radian * 180 / Math.PI; } function toRadian ( angle ) { return angle * Math.PI / 180; }
4. 角度的坐标 水平向右的角度是 0 度, 或 0 弧度 顺时针是正方向, 逆时针是负方向
练习: 绘制出, 圆心在 canva 正中心, 半径为 100, 角度从 -60度 到 120 度的圆弧
5. 如果没有当前位置, 绘制圆弧是没有任何问题 但是如果有了当前位置, 绘制圆弧的时候会将当前位置连接到圆弧上
6. 计算在圆弧上的点的坐标
7. 根据固定到起始点到 圆心, 结合圆弧和 closePath 方法可以绘制扇形( 楔形 Wedge)
8. 动态的通过动画, 一点一点的添加角度, 然后绘制一整个圆
9. 绘制文字 ctx.fillText( 文本内容, x, y ) ctx.strokeText( 文本内容, x, y );
常用的属性 ctx.font = ‘30px 黑体‘
ctx.textAlign left, center, right. start, end ctx.textBaseline top, middle, bottom. hanging, ideographics, alphabetic
ctx.measureText( 文本 ) 获取当前文字的字体设置下, 文字的宽度对象
——————————————————————————————————————
1. 图片绘制 ctx.drawImage() 有三种调用形式 1> ctx.drawImage( img, x, y ) 将 image 绘制到 x, y 表示的位置 2> ctx.drawImage( img, x, y, width, height ) 将 img 绘制到一个矩形区域内 3> ctx.drawImage( img, sx, sy, sw, sh, x, y, w, h ) 将图片 img 的 sx, sy, sw, sh 部分的内容绘制到画布的 x, y, w, h 的矩形区域内.
2. 计时器模型 var id = setInterval(function () {
if ( 条件 ) {
clearInterval( id ); }
// 继续执行我的内容
}, 20);
3. 变换的概念 计算机绘图是利用坐标进行绘图. 绘制任何图形都和坐标系的结构息息相关.
所谓的变换就是一套数学公式, 可以记录坐标轴的变化方式. 利用坐标轴的变换可以绘制出, 根据不同坐标轴特点而形成的图形.
基本的 api ctx.translate() 平移变换 ctx.rotate() 旋转变换 ctx.scale() 伸缩变换
4. 封装绘图对象 Line Rect Circle x, y, radius, strokeStyle, fillStyle, lineWidth Arc
function Line( config ) {
} Line.prototype = { stroke: function () {
} }
5. canvas 的状态 在 Canvas 中凡是设置了属性效果, 都会延续到后面一次修改 Canvas 在创建出来的时候, 是有一个默认的状态的 我希望每次修改状态的时候 都是不影响原来默认状态的 每次画完图时, 我都会新建一个状态, 然后绘制完成后 恢复到原有状态
ctx.save() 将当前状态保存 ctx.restore() 将保存的状态恢复
状态栈
6. 在 canvas 绘制的时候允许使用 canvas 绘制 canvas ctx.darwImage( img, ... )
此时 img 可以是 图片, 还可以是 canvas, 甚至是 video
7. Konva 是一个完全面向对象的框架 将所有的东西都看做是对象: 图片, 直线, 矩形, ... 将整个canvas看做成舞台(stage) 在舞台上放一个层, 那么将所有的图形放在这个层中
命名空间
var num = 123; function foo() {} // 污染全局作用域 var Itcast = {};
Itcast.num = 123; Itcast.foo = function () {};