Cancas

一、canvas是什么？

是 HTML5 提供的一种新标签
简单来说， 是HTML5中的标签，它是一个容器，可以使用JS在其中绘制图形或文字。

MDN：是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。主要聚焦于2D图形。

Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。

canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

HTML5 之前的 web 页面只能用一些固定样式的标签：比如 p、div、h1 等

二、canvas画图

1.浏览器兼容方面

1. ie9 以上才支持 canvas, 其他 chrome、ff、苹果浏览器等都支持
2. 只要浏览器兼容 canvas，那么就会支持绝大部分 api(个别最新 api 除外)
3. 移动端的兼容情况非常理想，基本上随便使用
4. 2d 的支持的都非常好，3d（webgl）ie11 才支持，其他都支持
5. 如果浏览器不兼容，最好进行友好提示
   例如：

你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本

6. 浏览器不兼容，可以使用_flash_等手段进行优雅降级

2.先得到画布对象

		var can = document.querySelector("#can");
		var ctx = can.getContext('2d');

3.画图流程

（1）告诉大家我要开始绘画了 ctx.beginPath()
（2） 确定要绘制的起点 ctx.moveTo(x,y)
（3）确定经过点… ctx.lineTo(x,y);
（4）确定要绘制的终点 ctx.lineTo(x,y);
（5）路径绘制结束 ctx.closePath(); // 关闭路径，将终点与起点链接起来
（6）确定画笔的样式，使用设置好的画笔描边或者填色

		ctx.fillStyle = "red" // 确定填充的颜色,默认值是黑色
		ctx.fill(); // 开始填充
		
		ctx.lineWidth = 8;
		ctx.strokeStyle = 'blue';
		ctx.stroke();

4.快速绘制一些常见的图像

1> 矩形

A. ctx.rect(x,y,w,h) // 确定路径
x,y 起始坐标
w,h 宽高
B. ctx.strokeRect(x,y,w,h); // 确定路径并描出来
C. ctx.fillRect(x,y,w,h); // 确定路径并填充出来

2> 快速画圆

ctx.arc(x,y,r,sa,ea,true/false)： x、y为圆心坐标，r为半径，
sa、ea分别为起始角度和结束角度， true是逆时针画圆，false是顺时针画圆；

  	360度角即2PI弧度，1度就是2PI/360=PI/180弧度，
  	90度就是2PI/360*90=PI/2弧度(其他的角度自行计算)

3> 贝塞尔曲线

A. 二次贝塞尔曲线
ctx.quadraticCurveTo (cx,cy,ex,ey)
cx,cy 控制点坐标
ex,ey 结束点坐标
开始点通过moveTo去做就行了

B. 三次贝塞尔曲线
bezierCurveTo (cx1,cy1,cx2,cy2,ex,ey)

5.在画板上绘制字体

1>fillText(text,x,y,maxWidth): 填充绘制
text表示文字 x、y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出

2>strokeText(text,x,y,maxWidth): 描边绘制
text表示文字 x、y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出；

3> 字体样式设置 ctx.font = “bold 40px Arial”

  	ctx.textAlign = "left | center | right" 			注意对齐方式

  	ctx.textBaseline = "top | middle | bottom" 			top: 四线格的最顶部线对齐起始点！
  	middle: 四线格的中间位置对齐起始点 			bottom： 四线格的底部对齐起始点

6.图形组合方式

ctx. globalCompositeOperation = “某一种方式”

source-over：默认值，表示新图覆盖在旧图之上
source-atop：只绘制旧图和重叠的部分，其他透明
source-in：只绘制新图的重叠部分，其他透明
source-out：只绘制新图，重叠部分和旧图透明
destination-over：表示旧图覆盖在新图之上
destination-atop：只绘制新图和重叠的部分，其他透明
destination-in：只绘制旧图的重叠部分，其他透明
destination-out：只绘制旧图，重叠部分和新图透明
lighter：旧图与新图都绘制，重叠部分混色处理
xor：旧图和新图重叠处做透明处理
copy：只绘制新图形，不绘制旧图形

7.图形阴影

ctx.shadowColor = “red”;
ctx.shadowBlur = 10；
ctx.shadowOffsetX = 10；
ctx.shadowOffsetY = 10;

8.图形的绘制

1> ctx.drawImage(imgage对象,x,y)

2> ctx.drawImage(imgage对象,x,y,w,h)
w,h 以压缩方式设置图形的宽高

3> ctx.drawImage(imgage对象,x,y,w,h,rx,ry,rw,rh)
x,y 图片上的坐标
w,h 要裁剪的宽高
rx,ry 画布上的坐标
rw,rh 要显示的图片的宽高

9. 图片平铺

	var image = new Image();
	image.src = '../img/3.png';
	image.onload = function(){
			// 平铺方式  repeat 完全平铺  repeat-x/y  no-repeat
			var pat = ctx.createPattern(image,"repeat-x"); 
			ctx.fillStyle = pat;
			ctx.fillRect(100,100,400,300);
		}

10. 画布裁剪

ctx.beginPath();
		ctx.rect(100,100,200,200);
		ctx.clip();
		// 先把图片对象创建出来
		var image = new Image();
		image.src = '../img/1.jpg';

		image.onload = function(){
			ctx.drawImage(image,0,0)
		}

11. 画布变形

1> scale(w,h) 画布缩放
w宽度上的缩放 h高度上的缩放

2> rotate(度数) 画布旋转
1度就是 Math.PI/180
旋转的中心点事画布的左上角，正度数是顺时针旋转

3> translate(x,y) 画布中心点偏移(原来的中心点：0 0)
x y 新的中心点坐标

12. 画布存档

	1> save() 保存当前的画布状态	
	2> restore() 回退到上一次的状态

13.清除画布

	ctx.clearRect(x,y,w,h);

	清除整个画布呢？
		ctx.clearRect(0,0,标签.width,标签.height);