Canvas

#Canvas

canvas基本概念

（1）、概念：canvas 是 HTML5 提供的一个用于展示绘图效果的标签. 
canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 
最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.

（2）、如果浏览器不支持canvas标签，canvas标签内部的文本将会被显示出来，canvas标签被解析成普通的div标签；

（3）、应用
		1、游戏
		2、可视化数据（重点内容）
		3、banner广告
		4、多媒体
		5、未来趋势
			（1）、模拟仿真；
			（2）、远程操作
			（3）、图形编辑

	tips:当下浏览器对canvas的支持仍然不完善；

canvas基本方法（170222）

（1）、canvas标签
	<canvas width=600 height=400 id="cas"></canvas>

	tips：canvas的宽高必须在行内设置，如果在css中设置，canvas的内容会被缩放；
		canvas的默认宽高为300 * 150，且一个页面可以拥有多个canvas标签；
		canvas本身是一个画布，无法自己绘图，要绘图需要用到绘图工具；


（2）、获取画图工具
	var cas = document.getElementById("cas");
	var ctx = cas.getContext("2d");
		tips：该方式获取了2d绘图工具，如果需要获取3d绘图工具则传入webgl;
			eg:
				var wgl	= cas.getContext("webgl");
				cas.width;（获取到了canvas的宽度）

（3）、画图 
	ctx.moveTo(100,100);
	ctx.lineTo(300,300);
	ctx.stroke();
		tips：如果没有moveTo，上一次lineTo的终点将被当成起点；
			lineTo的线条转折时，会对角度进行补全，所以如果在lineTo闭合图形有锯齿，手动给直线添加拐角即解决；

	ctx.fill();
		tips：实心填充封闭区域，带有自动闭合路径的功能；
			多路径叠加的情况，遵循非零环绕原则进行填充；

	ctx.closePath();
		tips：closePath()可以对未闭合的路径进行闭合；
		
	ctx.lineWidth = 10;
		tips：定义了线条的宽度；		

	ctx.beginPath();
		tips：在beginPath之后，将开启新的图层，这时候的操作对之前的绘图不会产生影响；


（4）、画图样式
	ctx.strokeStyle = "#E50243";
	ctx.fillStylt = "#E50243";
	
	ctx.lineCap = "round";		（圆形）
					"square";	（方形）
					"butt";（默认）
		tips：设置线两端的样式；

	ctx.lineJoin = "round";
					"bevel";（平的）
					"mitter";（默认）
	
	ctx.setLineDash([15]);	（设置虚线样式）
		eg：
			ctx.setLineDash([5,10]);
			tips:第一个参数代表了实线的样式，第二个参数代表了虚线的样式，以此类推；

	ctx.getLineDash();
		eg:
			var res = ctx.getLineDash();
			tips:获取虚线样式，获取的是一个数组，当没有setLineDash时，返回空数组[];

	ctx.lineDashOffset = -5;
		tips：表示偏移量，负数往右移动，正数往左移动；

canvas进阶操作（170223）

（1）、保存配置和恢复配置
	ctx.save();
	ctx.restore;
		tips：save和restore一般用于执行坐标变换的时候，
			在使用translate或rotate的之前，对canvas的配置进行save，在执行完成之后进行restore，即可避免变化引起的其他图形的改变；

（2）、绘制图形
	ctx.rect(x,y,width,height);
	ctx.stroke();
		tips：rect只绘制了一个矩形路径，还需要stroke才能绘制出图形；

	ctx.strokeRect(x,y,width,height);
	ctx.fillRect(x,y,width,height);

	ctx.clearRect(x,y,width,height);
		tips：该方法用于擦除页面上的指定区域的图像；

	ctx.arc(x,y,startAngle,endAngle,angleDirection);
		tips：该方法用于绘制一个圆弧；

canvas复杂图形绘制（170225）

（1）、文本
	ctx.strokeText(text,x,y,maxWidth);
		tips：绘制空心文本；

	ctx.fillText(text,x,y,maxWidth);
		tips：绘制填充文本；

	ctx.font = "50px Microsoft Yahei";
		tips：设置文本样式；

	ctx.textAlign = "left";		（文本水平向左对齐）
					"center";	（文本水平中心对齐）
					"right";	（文本水平向右对齐）

	ctx.textAlign = "start";	
					"end";

	ctx.textBaseLine = "top";		（垂直向上）
						"middle";	（垂直居中）
						"bottom";	（垂直向下）

	ctx.textBaseLine = "alphabetic";	（默认，基线对齐）
						"hanging";		（悬挂方式）
						"ideographic";	（与bottom类似）
	
	ctx.meatureText(文本).width	（测量文本的长度）

（2）、图像
	var img = new Image();
	img.src="xxx.jpg";
	ctx.drawImage(img,x,y);
	img.onload=function(){
		ctx.drawImage(img,x,y);
	}
		tips：img对象不仅仅是Image对象，还可以是video对象和canvas对象；

	ctx.drawImage(img,x,y,w,h);
	ctx.drawImage(img,x0,y0,w0,h0,x1,y1,w1.h1);
		tips：x0,y0,w0,h0指在img对象中的一个矩形区域；
			x1,y1,w1,h1指在canvas中的一个矩形区域；


（3）、坐标变换
	ctx.translate(x,y);
	ctx.rotate(π / 3);
	ctx.scale(1.5,1.5);

canvas方法（170226）

（1）、requestAnimationFrame(function(){});
	该方法类似一个定时器，function里面写循环进行的内容；
		1、循环会自适应显示器的帧率，并且有针对动画的专门优化；
		2、在页面处于后台的时候，该方法会自动降低动画对资源的占用；
		3、每一帧的时间不需要计算，该方法会自动同步当前的环境；

（2）、isPointInPath(x,y);
	给canvas中绘制一个闭合的路径，
	使用该方法可判断当前的(x,y)坐标是否落在了该闭合路径内，返回一个true或者false；
		eg:
			ctx.strokeRect(x,y,width,height);
			if(isPointInPath(e.offsetX,e.offsetY));

转载于:https://my.oschina.net/zhongjunhui/blog/857969