HTML5 canvas标签的全屏、退出全屏，canvas中显示的缩放、移动，小坑盘点

选择任意标签全屏显示，这儿是canvas，触发函数绑在按钮上：

此处没坑

$('#tab_fullScreen').click(function(){
		fullScreen();
	});
	
	function fullScreen() {
		var element = document.getElementById('tab_canvas'),method = "RequestFullScreen";
		

		var prefixMethod;
		["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
			if (prefixMethod) 
				return;
			if (prefix === "") {
				// 无前缀，方法首字母小写
				method = method.slice(0,1).toLowerCase() + method.slice(1);
			}
			var fsMethod = typeof element[prefix + method];
				if (fsMethod + "" !== "undefined") {
					// 如果是函数,则执行该函数
					if (fsMethod === "function") {
						prefixMethod = element[prefix + method]();
					} else {
						prefixMethod = element[prefix + method];
					}
				}
			}
		);
		return prefixMethod;
	};

退出全屏：

此处大坑--1.注意每个单词是否用驼峰法首字母大写，我看了一个很官方的文章，然后！！！坑在方法名最后一个单词Screen复制成screen上了！！！无良博主毁我青春！！！卡了1个多小时？；2.浏览器适配某些函数过时：chrome的从webkitCancelFullScreen改成了webkitExitFullScreen；3.我是用手机直接连wifi，局域网访问到电脑开的web服务器，但是手机没法显示控制台，这里基本用alert逐句调试，多用try catch，但try catch不是万能的，多数时候alert最管用！！！

这里写document就可以了，不用getElement...之类了

function exitFullScreen() {
		try{
			de = document;

		    // exit full-screen
			if (de.exitFullscreen) {
				de.exitFullscreen();
			} else if (de.webkitExitFullScreen) {
				de.webkitExitFullScreen();
			} else if (de.webkitCancelFullScreen) {
				de.webkitCancelFullScreen();
			} else if (de.mozCancelFullScreen) {
				de.mozCancelFullScreen();
			} else if (de.msExitFullScreen) {
				de.msExitFullScreen();
			} 
		}
		catch(err){
			alert(err.description);
		}
	};

最后是缩放和移动，调用了浏览器移动端的touch函数：

canvas中移动比较好理解，把作图的坐标轴imgX和imgY进行平移就好了；

缩放比较难理解，这样理解吧，先简单的理一理这个过程，缩放分为两步--1.修改了缩放比例；2.修改了作图的坐标轴imgX和imgY。解决办法，依次是---1.简单做个乘法，修改图像比例；2.假设以(x,y)为中心缩放，x距离原来的imgX的偏移量是(x - imgX)，现在相对偏移量是(x - imgX)*scale，反而言之现在的imgX = x - (x - imgX)*scale，y轴同理，问题解释清楚了，如果你在缩放前后，中心(x,y)有距离变化，那么另shiftX和shiftY为现在中心(x,y)对于原来中心的偏移量，结果就imgX = x - (x - imgX)*scale + shiftX，整理一下就是imgX = imgX * scale + shiftX + x * (1 - scale)。

//上一次触摸坐标
	var lastX, lastX2;
	var lastY, lastY2;
	//刚触摸的时间
	var startTime;
	//刚接触的坐标
	var startX, startY;
	var ctx =canvas.getContext("2d");
	ctx.lineWidth=2;//画笔粗细
	ctx.strokeStyle="#00FFFF";//画笔颜色
	function onTouchStart(event) {
		try
	    {
		    event.preventDefault();
		    //单点
		    var pos = windowToCanvas(canvas, event.touches[0].clientX, event.touches[0].clientY);
		    //第二点
		    if (event.touches[1]){
		    	var pos2 = windowToCanvas(canvas, event.touches[1].clientX, event.touches[1].clientY);
		    	lastX2 = pos2.x;
		    	lastY2 = pos2.y;
			}
		    lastX = pos.x;
		    lastY = pos.y;

		    startX = pos.x; 
		    startY = pos.y;
		    startTime=(new Date()).getTime();
		}
	    catch(err){
	        alert( err.description);
	    }
	}
	function onTouchMove(event) {
	    try
	    {
	    	event.preventDefault();
	    	if (getState() == DEFAULT){
	    		if (event.touches[1]){
	    			var pos = windowToCanvas(canvas, event.touches[0].clientX, event.touches[0].clientY);
			        var x = pos.x - lastX;
			        var y = pos.y - lastY;

				    var pos2 = windowToCanvas(canvas, event.touches[1].clientX, event.touches[1].clientY);
			        var x2 = pos2.x - lastX2;
			        var y2 = pos2.y - lastY2;

				    var lastDis = Math.sqrt((lastX - lastX2) * (lastX - lastX2) + (lastY - lastY2) * (lastY - lastY2));
				    var dis = Math.sqrt((pos.x - pos2.x) * (pos.x - pos2.x) + (pos.y - pos2.y) * (pos.y - pos2.y));

				    var scale = dis / lastDis;

				    imgScale = imgScale * scale;
				    var centerX = (pos.x + pos2.x)/2;
				    var centerY = (pos.y + pos2.y)/2;
				    var lastCenterX = (lastX + lastX2)/2;
				    var lastCenterY = (pos.y + pos2.y)/2;

				    var shiftX = (x + x2)/2;
				    var shiftY = (y + y2)/2;

				    imgX = imgX * scale + shiftX + centerX * (1 - scale);
				    imgY = imgY * scale + shiftY + centerY * (1 - scale);

				    lastX = pos.x;
				    lastY = pos.y;
				    lastX2 = pos2.x;
				    lastY2 = pos2.y;

			        drawImage();
	    		}
	    		else{
	    			var pos = windowToCanvas(canvas, event.touches[0].clientX, event.touches[0].clientY);
			        var x = pos.x - lastX;
			        var y = pos.y - lastY;
			        		    
				    lastX = pos.x;
				    lastY = pos.y;

			        imgX += x;
			        imgY += y;
			        drawImage();
	    		}
	    	}
	    	else if (getState() == PENCIL){
	    		
		    	//单点
			    var pos = windowToCanvas(canvas, event.touches[0].clientX, event.touches[0].clientY);
			   
				drawLine(lastX,lastY,pos.x,pos.y);
			   	addPath(lastX,lastY,pos.x,pos.y);
			   	//drawLine(lastX,lastY,event.touches[0].clientX,event.touches[0].clientY);
			    //lastX=event.touches[0].clientX;
			    //lastY=event.touches[0].clientY;			    
			    lastX=pos.x;
			    lastY=pos.y;
	    	}
	    }
	    catch(err){
	        alert( err.description);
	    }

	}

最后希望明年能杀G、过托福顺利，申请到北美50强学校的PhD，勿忘初心。