canvas学习笔记

1.基本用法

var canvas = document.getElementById('tutorial');

//检测支持性
if (canvas.getContext){
  //获得 2d 上下文对象
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

绘制形状
```
ctx.clearRect(0, 0, 200, 200); //    擦除(0,0)位置大小为200x200的矩形，擦除的意思是把该区域变为透明
ctx.fillStyle = '#dddddd'; // 设置颜色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
// 利用Path绘制复杂路径:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
```
1. 绘制方块：
- fillrect(x,y,w,h) 绘制一个填充的方格,默认颜色是黑色，前两个参数是坐标（x轴和y轴），后两个参数是宽高
- strokeRect(x,y,w,h) 绘制带边框的方块；
注意填充(fillrect)和画线(strokeRect)的区别。先画线后填充。那么填充覆盖画线，线框的宽度就会缩小一倍；先填充后画线。那么画线覆盖填充，方块的宽度就会缩小一倍
1. 设置绘图：
- fillStyle:填充颜色（绘制canvas是有顺序的）
- lineWidth：线宽度，是一个数值
- strokeStyle：边线颜色
1. 边界的绘制：
- beginPath:开始绘制路径
- closePath：结束绘制路径
- moveTo：移动到绘制的新目标点
- lineTo：新的目标点。每个线条只能有一个moveTo()可以有多个lineTo()
1. 绘制路径
- stroke:画线，默认黑色
- fill：填充默认黑色
- rect：矩形区域
- clearRect：删除一个画布的矩形区域
- save：保存路径
- restore：回复路径
1. 清除画布：
- clearRect(x,y,w,h) 清除画布。前两个参数是坐标（x轴和y轴），后两个参数是宽高
1. 绘制圆形：
- arc(x,y,半径，起始弧度，结束弧度，旋转方向)：x，y是圆心的坐标。逆时针为-，顺时针为+

绘制文本：就是在指定的位置输出文本，可以设置文本的字体、样式、阴影等，与CSS完全一致

fillText("内容",x,y) 在 canvas 上绘制实心的文本，xy是坐标
strokeText("内容",x,y)在 canvas 上绘制空心的文本

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('带阴影的文字', 20, 40);

画布的平移和旋转
- translate(x,y) 平移：画布的大小位置不变，是画布的起始位置变了，起始点就是平移的位置，但是作图的地方还是原来的大小
- rotate() 旋转：属性是角度，旋转都是以画布的起始点(0,0)旋转
- scale(0.5,0.5) 缩放：画布的缩放，其实就是讲画布向后移动，跟人的视距就变远了，近大远小
如果需要绘制3D怎么办？HTML5还有一个WebGL规范，允许在Canvas中绘制3D图形：
```
var gl = canvas.getContext("webgl");
```
Canvas除了能绘制基本的形状和文本，还可以实现动画、缩放、各种滤镜和像素转换等高级操作。如果要实现非常复杂的操作，考虑以下优化方案：
- 通过创建一个不可见的Canvas来绘图，然后将最终绘制结果复制到页面的可见Canvas中
- 尽量使用整数坐标而不是浮点数；可以创建多个重叠的Canvas绘制不同的层，而不是在一个Canvas中绘制非常复杂的图
- 背景图片如果不变可以直接用<img>标签并放到最底层

引申：canvas和svg的区别

Canvas：

依赖分辨率（位图）
canvas输出的是一整幅画布，不支持事件处理器
Canvas是逐像素进行渲染的，一旦图形绘制完成，就不会继续被浏览器关注。所以Canvas的文本渲染能力弱
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG：

不依赖分辨率（矢量图）
支持事件处理器：svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改
最适合带有大型渲染区域的应用程序（比如谷歌地图）：由于其本质为矢量图，可以被无限放大而不会失真，这很适合被用来做地图，而百度地图就是用svg技术做出来的
SVG由于DOM操作在复杂度高的游戏应用中会减慢渲染速度。所以不适合游戏应用

2.使用canvas压缩图片

先将图片的file文件转成baseURL
创建一个image标签去接收文件获取图片的宽高和比例。
创建canvas画布设置画布的大小。
将图片绘制到canvas上面。
对canvas进行压缩处理，获得新的baseURL
将baseURL转化回文件