html5 canvas畫板

時間 2019-11-10
原文原文鏈接
<!DOCTYPE HTML>
<html>
<title>HTML5-CanvasDrawDemo</title>
<meta charset="utf-8"/>
<body>
    <style>
		div {
			border:0;
			margin:auto;
			width:500px;
		}
		
		#div_head {
			border:0;
		}
	
		#div_head span{
		font-size:10px;
		}
		body canvas
        {
            border: 2px solid blue;
			border-radius:10px;
        }
		
		#txt_alpha { width:20px;}
		
		#txt_width{ width:30px;}
		footer { 
			margin:auto; 
			text-align:center;
			font-size:10px;
			}
    </style>
	<div id="div_head">
	<fieldset>
	<legend>Controller</legend>
	Color:<input id='btn_color' type='color' />
	Alpha:<input id="txt_alpha" type='range' min="0" max="1" step="0.1" value="1"/>
	Size:
	<input id='txt_width' type='range' min="1" max="10" step="1" value="4"/>
	<input id="btn_pre" type='button' value="撤銷"/>
	<input id="btn_next" type='button' value="恢復"/>
	<input id="btn_clear" type='button' value="Clear"/>
	</fieldset>
	</div>
	<div>
    <canvas id="drawgph" width="500" height="400" >
	<span><font color='red'>瀏覽器不支持Html5中的Canvas元素!</font></span>
	</canvas>
	</div>
	<footer>
	<span>Google Chrome 版本 33.0.1750.154 m 測試經過!</span></br>
	<span>IE9.0 不支持顏色選擇,需手動填入顏色值,格式爲「#FFFFFF」。</span></br>
	<span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=170515071&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:170515071:51" alt="點擊這裏給我發消息" title="點擊這裏給我發消息"/></a></span></br>
	<span>
	<a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=2qKzu7Wjr_-q7Oiaq6v0ubW3" style="text-decoration:none;"><img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_12.png"/></a>
	</span>
	</footer>
	<script type="text/javascript">
		//檢測瀏覽器版本
		var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        window.ActiveXObject ? Sys.ie = ua.match(/msie ([\d.]+)/)[1] :
        document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] :
        window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] :
        window.opera ? Sys.opera = ua.match(/opera.([\d.]+)/)[1] :
        window.openDatabase ? Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0;
        
		if(Sys.ie>=9){//IE9.0目前不支持type=color
			document.getElementById('btn_color').value="#000000";
		}
        if(Sys.firefox) ver='Firefox: '+Sys.firefox;
        if(Sys.chrome) ver='Chrome: '+Sys.chrome;
        if(Sys.opera) ver='Opera: '+Sys.opera;
        if(Sys.safari) ver='Safari: '+Sys.safari;
	
	
        var obj = document.getElementById('drawgph');
        var ctx = obj.getContext('2d');
        var start_X = 0;//起點X軸位置
        var start_Y = 0;//起點Y軸位置
        var isMove = false;//是否繪製圖形
		var history=[];//歷史操做記錄
		var count=0;//記錄當前執行的步驟數(繪製+1;撤銷-1 ;恢復+1)
		var colorObj=document.getElementById('btn_color');//顏色對象
		var alpha=document.getElementById('txt_alpha');//透明對象
		var size=document.getElementById('txt_width');//畫筆寬度
        obj.addEventListener("mousedown", function (e) {
            start_X = e.pageX-e.target.offsetLeft;
            start_Y = e.pageY-e.target.offsetTop;
			//console.log('mousedown on ('+start_X+','+start_Y+')');
            isMove = true;
			ctx.lineWidth =size.value;
			ctx.strokeStyle=colorObj.value;
			ctx.globalAlpha=alpha.value;
			ctx.save();
        });
        obj.addEventListener("mousemove", function (e) {
            if (isMove) {
				ctx.beginPath();
				ctx.moveTo(start_X,start_Y);
				ctx.lineTo(e.pageX-e.target.offsetLeft, e.pageY-e.target.offsetTop);
                ctx.stroke();
				start_X = e.pageX-e.target.offsetLeft;
				start_Y = e.pageY-e.target.offsetTop;
            }
        });
        obj.addEventListener("mouseup", function (e) {
			ctx.restore();
			//若是有產生繪圖則記錄操做
			if(isMove){
				historyLog();
			}
            isMove = false;
			//若是在內部釋放中斷冒泡事件
			window.event.cancelBubble=true;
        });
		//防止用戶畫筆在畫布範圍外釋放後回到畫布持續繪畫狀態
		window.addEventListener('mouseup',function(e){ 
			ctx.restore();
			//若是有產生繪圖則記錄操做
			if(isMove){
				historyLog();
			}
			isMove=false;
			
		});
		//首次加載時保存空白畫布歷史記錄
		window.addEventListener('load',historyLog);
		//Clear按鈕清除畫布內容
		btn_clear.onclick=function(){
			//console.log("Action: btn_clear.onclick" );
			ctx.clearRect(0,0,500,400);
			count=0;
			history=[];
			historyLog();
		}
		//撤銷
		btn_pre.onclick=function(){
			count--;
			//console.log("撤銷操做時變量Count:"+count);
			if(count==0){
				count++;
			}
			ctx.putImageData(history[count-1],0,0);
			//console.log(history);
		}
		
		//恢復
		btn_next.onclick=function(){
			//console.log("恢復操做時變量Count:"+count);
			if(history[count]){
				ctx.putImageData(history[count],0,0);
				count++;
			}
		}
		
		//記錄操做
		function historyLog(){
			//console.log("記錄操做時變量Count:"+count);
			history[count]=(ctx.getImageData(0,0,500,400));
			count++;
			//console.log(history);
		}
		
    </script>
</body>
</html>
點擊查看演示地址html
相關標籤/搜索
jquery+html5+css3+canvas
html5+canvas+javascript
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。