canvas画布

---

前言

一、画布的流程

1.先得到画布对象

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

代码如下：
	 // 先得到画布
    var can = document.querySelector('#can')
	var ctx = can.getContext("2d");

2. 画图流程

告诉大家我要开始绘画了  ctx.beginPath()
确定要绘制的起点 ctx.moveTo(x,y)
确定经过点... ctx.lineTo(x,y);
确定要绘制的终点 ctx.lineTo(x,y);
路径绘制结束 ctx.closePath(); // 关闭路径，将终点与起点链接起来
确定画笔的样式，使用设置好的画笔描边或者填色
ctx.fillStyle = "red" // 确定填充的颜色,默认值是黑色
ctx.fill(); // 开始填充
ctx.lineWidth = 8;
ctx.strokeStyle = 'blue';
ctx.stroke();展示出来

代码如下：
	  //我要开始绘画了
	ctx.beginPath();

    // 保存当前画布状态
	ctx.save();

    // 度数 画布旋转多少度
	ctx.rotate(30*Math.PI/180);

	//画布中心点偏移(原来的中心点：0 0 )x y的新坐标
	ctx.translate(100,100)
	
    // 确定路径
	ctx.rect(0,0,200,200);
	
    // 开始填充
	ctx.fill();

效果图如下：

二. 快速绘制一些常见图像

(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)

代码如下：
	ctx.beginPath();
	ctx.moveTo(250,50);
	ctx.bezierCurveTo(450,125,50,275,250,350)
	ctx.stroke();

示例图：

(4) 在画板上绘制字体

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： 四线格的底部对齐起始点

代码如下：
	ctx.font = "bold 30px Arial"
	ctx.textAlign = "left"
	ctx.textBaseline = "middle"
	ctx.strokeStyle="red"
	ctx.strokeText('Hello world',40,40);

	ctx.stroke();

示例图如下：

(5) 图形组合方式

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

(6) 图形阴影

	ctx.shadowColor = "red";
	ctx.shadowBlur = 10
	ctx.shadowOffsetX = 10;
	ctx.shadowOffsetY = 10;

代码如下：
 // 开始绘画
    ctx.beginPath();
    ctx.arc(200,200,150,0,2*Math.PI,false);
    ctx.fillStyle = "#49cbf9"

    ctx.shadowColor = '#5e8cae';
    ctx.shadowBlur = 10
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;

    ctx.fill();

例图如下：

(7) 图形的绘制

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 要显示的图片的宽高

(8) 图片平铺

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

(9) 画布裁剪

	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)
	}

(10) 画布变形

1> scale(w,h) 画布缩放
		w宽度上的缩放  h高度上的缩放
2> rotate(度数) 画布旋转
	1度就是 Math.PI/180
	旋转的中心点事画布的左上角，正度数是顺时针旋转
3> translate(x,y) 画布中心点偏移(原来的中心点：0 0)
		x y 新的中心点坐标

(11) 画布存档

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

(12) 清除画布

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

总结

Canvas是HTML5中提供的一个用于绘制图形的元素，通过JavaScript脚本可以在Canvas上绘制图形、图像、 创建动画等。