HTML 5 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で1文ごとにデバッグして、多く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を平行移動すればいいです.
スケーリングは理解しにくいので、このように理解しましょう.まず簡単にこの過程を整理して、スケーリングは2つのステップに分けます--1.スケールを変更しました.2.作図の座標軸imgXとimgYを修正しました.解決策は次のとおりである.簡単に乗算して、画像のスケールを修正します.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を殺し、TOEFLを無事に通過し、北米50強学校のPhDを申請し、初心を忘れないでほしい.