canvas
-
Canvas 是 HTML5 中的一个重要特性，它可以使用 JavaScript 在网页上进行图形绘制。它提供了一系列的绘图 API，可以用来绘制图形、图像、文本等。常见的应用场景有：
-
游戏开发：Canvas 支持高性能的 2D 图形绘制，可以用来开发 HTML5 游戏。
-
数据可视化：Canvas 可以绘制各种图表，如折线图、柱状图、饼图等，常用于数据可视化。
-
图像处理：Canvas 支持对图像进行各种操作，如缩放、旋转、剪切等，常用于图像编辑和处理。
-
电子签名：Canvas 可以绘制手写笔迹，常用于电子签名场景。
-
动画效果：Canvas 支持动画效果，可以用来制作各种动画。
-
1.第一步会使用
- 布置画布：通过添加标签，添加canvas元素
- 获取画布：通过标签的id，获得canvas对象
- 获得画笔：通过canvas对象的getContext("2d")方法，获得2D环境
<canvas id=“canvas”></canvas>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
2. 画线段。
-
移动画笔，使画笔移动至绘画的开始处
-
确定第一笔的停止点
-
规划好之后，选择画笔（包括画笔的粗细和颜色等）
-
确定绘制
-
2.1 绘制线条的方法
- 移动画笔(moveTo())
- 笔画停点(lineTo())
- 选择画笔，设置画笔的基础参数/宽度+填充的颜色等
- lineWitdh /strokeStyle
- 绘制fill() 填充 和stroke()
- beginPath()/closePath().在绘制的过程中，我们务必要使用。绘制结束之后关闭。
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(100,100);
context.lineTo(600,600);
context.lineWidth = 5;
context.strokeStyle = "#AA394C";
context.stroke();
context.closePath();
2.2 绘制矩形
- rect(x,y,width,height);
- 只能调用stroke() 或 fill()后才会真正作用于画布
- fillRect(x,y,width,height);
- strokeRect(x,y,width,height);
3. 绘制图像-drawImage
- 三参数：context.drawImage(img,x,y)
- 五参数：context.drawImage(img,x,y,width,height)
- 九参数：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
4. 旋转画布
- 通常我们会借助数据公式
- translate/rotate 两个方法 结合使用
- translate（x,y） 做原点回归
- rotate(deg) 旋转角度/弧度
- Canvas是基于状态的绘制，所以每次旋转都是接着上次旋转的基础上继续旋转，所以在使用图形变换的时候必须搭配save()与restore()方法，一方面重置旋转角度，另一方面重置坐标系原点。
5. 裁剪clip().
// 实际图片的裁剪还是使用的drawImage
- 计算出裁剪的坐标，计算出裁剪的宽和高，计算出画布的大小
- Canvas API的图像裁剪功能是指，在画布内使用路径，只绘制该路径内所包含区域的图像，不会只路径外的图像。这有点像Flash中的图层遮罩
- 裁剪是对画布进行的，裁切后的画布不能恢复到原来的大小，也就是说画布是越切越小的，要想保证最后仍然能在canvas最初定义的大小下绘图需要注意save()和restore()。画布是先裁切完了再进行绘图。并不一定非要是图片，路径也可以放进去~
-
clip()改变了绘画环境。context调用后，所裁剪的区域就是clip ()后的绘制环境，clip()之后的绘画只能在裁剪区域中渲染
-
clip()裁剪后不能访问裁剪区域的其他区域（只能渲染在裁剪区域） clip()能限定显示区域 save()用来保存Canvas的状态。save()之后，可以操作canvas的平移，缩放，旋转，裁剪等操作。（restore()可以比save()少，但不可以比restore多，因为restore多会引发Error）.。
