canvas

基础概念

cavnas绘图技术

  • 概念：因为JavaScript在HTML5之前缺乏实现复杂动画和几何图形的绘制技术，在HTML5版本新增了canvas绘图技术。
  • canvas绘图技术利用HTML5提供的<canvas>作为画布，利用JavaScript配套的api来实现绘制几何图形。绘制图形 配合JavaScript 定时器可以实现复杂动画.

画布

  • 页面上可以使用<canvas></canvas>来充当”画布”的角色。对于页面，canvas就是一个普通的行内标签。canvas标签本身提供了width、height属性来设置”画布”的尺寸大小

  • 不要用css设置尺寸。

    1. <canvas width="1000" height="300"></canvas>

画笔

  • JavaScript会针对每个画布都会提供一个专属的”画笔”。在程序中，画笔会作为一个对象存在，该对象提供了一系列的api用于进行绘制操作。该画笔是原生提供，不能用jQuery进行操作。 ```javascript 获取画笔
  1. 先获取画布标签 var canvas = document.querySelector(‘css选择器’); var 画笔变量名 = canvas.getContext(‘2d’);

//通过画笔来进行绘制 画笔变量名.函数名();

例子： html:

JavaScript： var canvas = document.querySelector(‘#demo’); var ctx = canvas.getContext(‘2d’);

ctx.函数名();

  4. <a name="ffe65d11"></a>
  5. ### canvas绘图技术的一般流程
  7. 1. 
  8. 在页面上设置画布：`<canvas></canvas>`
  10. 2. 
  11. 在JavaScript中获取画笔
  13. 3. 
  14. 利用画笔提供的api来进行绘图操作。画笔获取一次即可重复使用
  15. <br />3-1：调用`beginPath()`开启绘制路径
  16. <br />3-2:  调用`moveTo`确定画笔的绘制位置
  17. <br />3-3: 调用`lineTo`或`arc`来勾勒子路径
  18. <br />3-4:调用`closePath()`来闭合子路径
  19. <br />3-5:调用`stroke()`绘制路径,显示在页面上
  22. <a name="a9ce20b2"></a>
  23. ### canvas中的坐标系
  25. - 以画布的左上角为原点，向右x轴为正，向下y轴为正
  27. <a name="2dbf9484"></a>
  28. ### canvas 路径
  30. - 路径：一条闭合的线条。一般一个路径是由几条子路径构成。
  31. - 子路径：一个具体的线条。几条子路径进行连接闭合，就形成了一条完整的路径。
  32. - canvas是通过`beginPath()`来表示开始绘制新的路径，`closePath`会将目前已绘制的子路径进行闭合，形成一条完整的路径。
  33. - 即我们会在`beginPath`以及`closePath`之间进行绘制子路径。当绘制完最后一条子路径后，调用`closePath`，会自动将第一条子路径的起点和最后一条子路径的终点进行链接，形成一条完整的路径。
  35. <a name="c282d97e"></a>
  36. ## 绘图操作
  38. <a name="b7b05952"></a>
  39. ### 基本操作
  41. - `beginPath()`：开启绘制一条路径
  42. - `closePath()`:关闭当前绘制的路径，会将该条路径进行闭合
  44. <a name="290e0778"></a>
  45. ### 绘制几何图形-线条相关图形
  47. - 
  48. `moveTo(x,y)`:将画笔移动到指定坐标
  50. - 
  51. `lineTo(x,y)`:勾勒出一条直线(子路径)。直线的起点就是画笔的位置，终点就是指定的x和y坐标。如果需要显示该条子路径，需要调用`stroke()`来进行真正的绘制子路径
  53. - 
  54. `stroke()`:绘制当前已经勾勒出的子路径。
  56. - 
  57. `strokeStyle`:设置线条的颜色
  59. - 
  60. `lineWidth`:设置线条的粗细，即宽度
  62. - 
  63. `fill()`:对图形进行填充
  65. - 
  66. `fillStyle`:设置填充颜色
  67. ```javascript
  68. var canvas = document.querySelector('css选择器');
  69. var 画笔变量名 = canvas.getContext('2d');
  70. 画笔变量名.strokeStyle ="颜色";
  71. 画笔变量名.lineWidth ="5";
  72. 画笔变量名.fill();
  73. 画笔变量名.fillStyle = "pink";

绘制几何图形-曲线

  • arc:勾勒一段曲线。 ```javascript 画笔变量名.arc(圆心的x坐标，圆心的y坐标，半径，开始角度，结束角度，是否逆时针绘制);

例子：以100,100 半径为5生成4分之1圆，从0度到90度 var canvas = document.querySelector(‘#demo’); var ctx = canvas.getContext(‘2d’); ctx.arc(100,100,5,0,Math.PI/2);//默认顺时针

  3.    - 在canvas中，以`Math.PI`作为180度。90度为`Math.PI/2`.37度为`37*Math.PI/180`,360度为`2*Math.PI`
  5. <a name="0105a81c"></a>
  6. ### 其他常用api
  8. - 
  9. `clearRect`:清理画布中的指定区域。即清理绘制痕迹
  10. ```javascript
  11. 画笔变量名.clearRect(清理区域的左上角x坐标，清理区域的左上角y坐标,清理区域的宽度,清理区域的高度)
  13. 例子：清理整个画布,假设画布变量是canvas
  14. ctx.clearRect(0,0,canvas.width,canvas.height)

粒子动画

主要思路

  • 利用随机圆心位置批量生成小圆，然后利用定时器不断改变每个小圆点的圆心位置，达到随机移动的目的。再判断两个点的圆心是否小于指定的一个数字，是就针对这两个点的圆心来绘制线条。给鼠标设置移动事件，保存鼠标移动的x和y坐标，以此为圆心，指定一个半径。判断所有的点，是否是在这个圆以内，如果是，则以两个点的圆心为坐标生成线条

随机点绘制

  • 每个点的状态需要保存。每个点需要使用一个原生对象来保存，并把所有 的点保存到数组中，统一绘制

点随机移动

  • 随机移动的原理就是不断的改变点的圆心位置。
  • 利用定时器不断的绘制（清屏）

  • 边界的判断：点移动范围不能超过边界

    • 再移动之前对当前点的位置进行判断，如果超出指定范围，那么就速度取反

绘制两点间线条

  • 思路：如果两个点之间的距离小于指定值，那么就针对这两个点进行连线

  • 步骤

    1. 创建一个函数，需要传入一个点对象。里面遍历整个dots数组，判断遍历的点和传入的点的距离是否小于指定值，如果小于，则用画笔进行连线。

设置鼠标移动事件，规定线条生成范围

  • 思路：对鼠标设置move事件，获取鼠标的x和y坐标。然后指定一个半径，表示以鼠标为圆心的一个圆。处于该圆以内的两个点进行连线。（实际上就是在第三阶段的函数中额外再加一个判断条件，即点在该圆内（与圆心的距离小于半径））