canvas入门笔记

Posted 2020-09-29 法门扫地僧

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 () {};