JavaScript（四）

用html5裏的canvas做一個在線畫圖，這裏的是我看視頻自己學的，代碼註釋有的是根據自己的理解添加的，可以作爲參考。

整體的界面截圖：

先說下這個在線畫板的整體思路吧，

（1）先設計好整體的佈局，也就是樣式什麼的，裏面有鼠標經過改變邊框這個自己加就行，用的hover這個屬性，

（2）給每個按鈕加一個onclick事件，也要給個id方便後面用到。

（3）這一步就重要了再js裏寫操作函數，先獲取相應的標籤，然後對其操作，我們會用到函數，也會用到數組（用數組的目的是爲了只選擇一個事件起作用，後面看代碼可以看到）。

註釋很詳細，不多說上代碼:

1.html代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<title></title>
	</head>
	<body>
		<header id="header">在線畫板</header>
		
		<section id="content">
			
			<!--工具區-->
			<ul id="tool">
				<li><h3>圖形</h3><hr />
				<ul id="image">
					<form id="myform" name="data" action="http://localhost/down.php" method="post">
						<li id="saveimg"><button οnclick="saveimg()">保存圖片</button></li>
						<input type="hidden"  name="data" id="data"/>
					</form>
					
					<li id="clearimg"><button οnclick="clearimag()">清空畫板</button></li>
				</ul>
				
				</li>
				<li><h3>工具</h3><hr />
				<ul id="means">
					<li id="means_brush" οnclick="drawBrush(0)"><img src="img/Brush.png" alt="" /></li>
					<li id="means_eraser" οnclick="drawEraser(1)"><img src="img/Eraser.png"/></li>
					<li id="means_paint" οnclick="drawPaint(2)"><img src="img/Paint.png" alt="" /></li>
					<li id="means_straw" οnclick="drawStraw(3)"><img src="img/Straw.png" alt="" /></li>
					<li id="means_text" οnclick="drawText(4)"><img src="img/text.png" alt="" /></li>
					<li id="means_magnifier" οnclick="drawMagnifier(5)"><img src="img/magnifier.png" alt="" /></li>
				</ul>
				</li>
				<li><h3>形狀</h3><hr />
				<ul id="shape">
					<li id="shape_line" οnclick="drawLine(6)"><img src="img/line.png" alt="" /></li>
					<li id="shape_arc" οnclick="drawArc(7)"><img src="img/arc.png"/></li>
					<li id="shape_rect" οnclick="drawRect(8)"><img src="img/rect.png" alt="" /></li>
					<li id="shape_poly" οnclick="drawPoly(9)"><img src="img/poly.png" alt="" /></li>
					<li id="shape_arcfill" οnclick="drawArcfill(10)"><img src="img/arcfill.png" alt="" /></li>
					<li id="shape_rectfill" οnclick="drawRectfill(11)"><img src="img/rectfill.png" alt="" /></li>
				</ul>
				
				</li>
				<li><h3>線寬</h3><hr />
				<ul id="size">
					<li id="width_1" οnclick="setLineWidth(0)"><img src="img/line1px.png" alt="" /></li>
					<li id="width_3" οnclick="setLineWidth(1)"><img src="img/line3px.png"/></li>
					<li id="width_5" οnclick="setLineWidth(2)"><img src="img/line5px.png" alt="" /></li>
					<li id="width_8" οnclick="setLineWidth(3)"><img src="img/line8px.png" alt="" /></li>
				</ul>
				
				</li>
				<li><h3>顏色</h3><hr />
				<ul id="color">
					<li id="red" οnclick="setColor(this,0)"></li>
					<li id="green" οnclick="setColor(this,1)"></li>
					<li id="blue" οnclick="setColor(this,2)"></li>
					<li id="yellow" οnclick="setColor(this,3)"></li>
					<li id="white" οnclick="setColor(this,4)"></li>
					<li id="black" οnclick="setColor(this,5)"></li>
					<li id="pink" οnclick="setColor(this,6)"></li>
					<li id="purple" οnclick="setColor(this,7)"></li>
					<li id="cyan" οnclick="setColor(this,8)"></li>
					<li id="orange" οnclick="setColor(this,9)"></li>
					
				</ul>
				
				</li>
			</ul>
			<div id="sizeCanvas">
			<!--繪圖區-->
			<canvas id="canvas" width="880px" height="410px">
				您的瀏覽器不支持canvas標籤請升級瀏覽器
			</canvas>
			</div>
			<!--因爲解析是從上到下的所以在canvas後面引入js文件這樣不會出錯。-->
			<script type="text/javascript" src="js/index.js"></script>
		
		</section>
		<footer id="footer">
		<small>一葉書林</small>
		</footer>
	</body>
</html>

2.css樣式：

/*頁面公共屬性設置*/
*{
	margin: 0;
	padding: 0;
	list-style: none;
	/*border: 0;*/
}

body{
	background: #ABCDEF;
	
}

/*頁面頂部屬性設置*/
#header{
	width: 900px;
	height: 80px;
	font-size: 20px;
	margin: 0 auto;
	text-align: center;
	line-height: 100px;
	
}
/*頁面中間部分屬性設置*/
#content{
	width: 900px;
	height: 550px;
	background: gray;
	margin: 0 auto;
	overflow: hidden;

}

#sizeCanvas{
	width: 890px;
	height: 420px;
	overflow: hidden;
}



#canvas{
	background: white;
	margin: 10px;
}

#canvas:hover{
	cursor: crosshair;
}


#tool{
	
	height: 100px;
	margin-left: 10px;
	text-align: center;
}

#tool li{
	float: left;
	width: 174px;
	height: 110px;
	background: #ccc;
	margin-top: 10px;
	border-right: 1px solid red;
}


#image{
	text-align: left;
	padding-left: 15px;

}


#image li{
	height: 18px;
	list-style: square inside;
	width: 100px;
	border: 0;
}



#image li button{
	background: gray;
	border: 1px solid #000;
}
#image li button:hover{
	border: 1px solid white;
}



#means,#shape{
	margin-left: 15px;
	margin-top: 1px;
}

#means  img,#shape img{
	height: 20px;
	width: 20px;
}

#means li,#shape li{
	height: 20px;
	width: 45px;
	border: 1px solid black;
}

#means li:hover,#shape li:hover{
	border: 1px solid white;
}



#size li{
	height: 5px;
	width: 90px;
	border: 1px solid #CCCCCC;
	margin-left:40px ;
}

#size li img{
	height: 5px;
	width: 90px;
	}

#size li img:hover{
border: 1px solid white;
}

#color{
	margin-left: 3px;
}

#color li{
	width: 29px;
	height: 23px;
	border: 1px solid #000;
	margin-left: 2px;
}

#color li:hover{
	border:1px solid white;
	
}


#color #red{
	background: red;
}

#color #green{
	background: green;
}

#color #blue{
	background: blue;
}

#color #yellow{
	background: yellow;
}

#color #white{
	background: white;
}

#color #black{
	background: black;
}

#color #pink{
	background: pink;
}

#color #purple{
	background: purple;
}

#color #cyan{
	background: cyan;
}

#color #orange{
	background: orange;
}






/*頁面底部屬性設置*/
#footer{
	width: 900px;
	height: 60px;
	margin: 0 auto;
	text-align: center;
	
}

3.js代碼：

var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
//獲取工具中的畫筆

//獲取畫筆標籤
var Brush = document.getElementById("means_brush");
//獲取橡皮標籤
var Eraser = document.getElementById("means_eraser");
//獲取油漆桶標籤
var Paint = document.getElementById("means_paint");
//獲取吸管標籤
var Straw = document.getElementById("means_straw");
//獲取文本標籤
var Text = document.getElementById("means_text");
//獲取放大鏡標籤
var Magnifier = document.getElementById("means_magnifier");


//獲取形狀按鈕標籤

//獲取劃線標籤
var Line = document.getElementById("shape_line");
//獲取畫圓圈標籤
var Arc = document.getElementById("shape_arc");
//獲取畫方框標籤
var Rect = document.getElementById("shape_rect");
//獲取畫多標籤的標籤
var Poly = document.getElementById("shape_poly");
//獲取畫圓形標籤填充
var Arcfill = document.getElementById("shape_arcfill");
//獲取畫矩形標籤
var Rectfill = document.getElementById("shape_rectfill");

//把十二個標籤放到一個數組裏

var actions=[Brush,Eraser,Paint,Straw,Text,Magnifier,Line,Arc,Rect,Poly,Arcfill,Rectfill]


//獲取線寬按鈕

var line_1 = document.getElementById("width_1");
var line_3 = document.getElementById("width_3");
var line_5 = document.getElementById("width_5");
var line_8 = document.getElementById("width_8");

//把四種線寬放到一個數組中
var widths = [line_1,line_3,line_5,line_8];
//獲取顏色按鈕
var ColorRed = document.getElementById("red");
var ColorGreen = document.getElementById("green");
var ColorBlue = document.getElementById("blue");
var ColorYellow = document.getElementById("yellow");
var ColorWhite = document.getElementById("white");
var ColorBlack = document.getElementById("black");
var ColorPink = document.getElementById("pink");
var ColorPurple = document.getElementById("purple");
var ColorCyan = document.getElementById("cyan");
var ColorOrange = document.getElementById("orange");
////把顏色放到一個數組裏
var colors=[ColorRed,ColorGreen,ColorBlue,ColorYellow,ColorWhite,ColorBlack,ColorPink,ColorPurple,ColorCyan,ColorOrange];


//設置圖像功能函數
function saveimg(){
	var imgdate = canvas.toDataURL();
	var b64 = imgdate.substring(22);
//	alert(b64);
	var data=document.getElementById("date");
	data.value(b64);
//	將表單提交到後臺//http：localhost/down.php
	var form=document.getElementById("myform");
	form.submit();
	
}

function clearimag(){
//	畫布清除方法
//四個參數前兩個是清空的開始座標,後兩個一個是畫布的寬度一個是畫布的高度
cxt.clearRect(0,0,880,410);
	
}






//設置初始值
//默認值畫筆工具
drawBrush(0);
//默認設置線寬
setLineWidth(0);
//默認設置顏色
setColor(ColorRed,0);

//工具形狀狀態設置函數

function  setStatus(Arr,num,type){
	for(var i=0;i<Arr.length;i++){
//		設置選中的標籤屬性
		if(i == num){
			if(type==1){
//				設置改變css的樣式是背景色還是邊框1是背景色0是邊框
				Arr[i].style.background="yellow";
			}
			else{
				Arr[i].style.border="1px solid #fff";
			}
			
		}else{//設置未選中的其他標籤的顏色和邊的顏色
			if(type==1){
				Arr[i].style.background="#ccc";
			}
			else{
				Arr[i].style.border="1px solid #000";
			}
		}
	}
}

//列出上面的所有的函數

//畫筆函數
function drawBrush(num){
	
	setStatus(actions,num,1);
	var  flag=0;//鼠標進來是不畫的得等到點擊才畫
//			鼠標按下去的時候開始點
			canvas.onmousedown = function(evt){		
			evt=window.event||evt;//適應瀏覽器
			var startX=evt.pageX-this.offsetLeft;
			var startY=evt.pageY-this.offsetTop;
			cxt.beginPath();
			cxt.moveTo(startX,startY);
			flag=1;
			}
			
//			鼠標移動不停的畫圖,就是鼠標的位置
			canvas.οnmοusemοve=function(){
				evt=window.event||evt;
				var endX=evt.pageX-this.offsetLeft;
				var endY=evt.pageY-this.offsetTop;
//				判斷鼠標是不是點擊過
				if(flag){
				
						cxt.lineTo(endX,endY);
						cxt.stroke();
				}
			}
//			鼠標擡起的時候結束畫圖
			canvas.οnmοuseup=function(){
				flag=0;
			}
//			鼠標移出時flag=0;
			canvas.οnmοuseοut=function(){
				flag=0;
			}

}
//橡皮擦函數
var eraserFlag=0;//橡皮擦的狀態標誌位
function drawEraser(num){
	setStatus(actions,num,1)
	
	canvas.οnmοusedοwn=function(evt){
		evt=window.event||evt;
		var eraserX=evt.pageX-this.offsetLeft;
		var eraserY=evt.pageY-this.offsetTop;
//		canvas 擦除方法是cxt.clearRect();
		cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2)
		eraserFlag=1;
	}
	canvas.οnmοusemοve=function(evt){
		evt=window.event||evt;
		var eraserX=evt.pageX-this.offsetLeft;
		var eraserY=evt.pageY-this.offsetTop;
//		擦除方法,隨着鼠標擦除

//		加一個判斷,判斷鼠標左鍵是否按下(拖動鼠標才能刪除)
		if(eraserFlag){
			cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2)
		}
		
	}
//	擡起鼠標標誌位變成0;
	canvas.οnmοuseup=function(evt){
		evt=window.event||evt;
		eraserFlag=0;
	}
//	鼠標移出畫筆標誌位設置爲0
	canvas.οnmοuseοut=function(evt){
		evt=window.event||evt;
		eraserFlag=0;
	}
	
	
	
	
	
}
//油漆桶函數（整個畫布變成一個顏色）
function drawPaint(num){
	setStatus(actions,num,1)
	canvas.οnmοusedοwn=function(){
//		把畫布圖成指定顏色
		evt=window.event||evt;
		
		
		
		cxt.fillRect(rectX,rectY,rectW,rectH);
			
	}
	
	canvas.οnmοuseup=null;
	canvas.οnmοusemοve=null;
	canvas.οnmοuseοut=null;
	
	
}
//吸管函數
function drawStraw(num){
	setStatus(actions,num,1)
	canvas.οnmοusedοwn=function(evt){
		evt=window.event||evt;
		var strawX=evt.pageX-this.offsetLeft;
		var strawY=evt.pageY-this.offsetTop;
//		獲取該點的顏色信息
//		獲取圖形信息的方法getImageData(開始點x和結束點y，寬度和高度四個信息)
		var obj=cxt.getImageData(strawX,strawY,1,1);
//		像素信息都存在了obj.data裏,裏面放的是[紅,綠,藍,透明度,紅,綠,藍,透明度,紅,綠,藍,透明度]
		var color="rgb("+obj.data[0]+","+obj.data[1]+","+obj.data[2]+")";
//		alert(color);
//		將吸管吸出的顏色設置到應用中
		cxt.strokeStyle=color;
		cxt.fillStyle=color;
//		吸管吸過顏色後自動將畫筆顏色設置成吸管吸的顏色
		drawBrush(0);
		
	}
//	取消移動事件,鼠標擡起事件,鼠標移出事件,
	canvas .οnmοusemοve=null;
	canvas.οnmοuseup=null;
	canvas.οnmοuseοut=null;
	
	
}
//文本函數
function drawText(num){
	setStatus(actions,num,1)
	canvas.οnmοusedοwn=function(evt){
		evt=window.event||evt;
//		獲取鼠標點擊時的位置
//		獲取用戶輸入的信息
//		將用戶輸入的信息寫到畫布中相應的畫板上
		var textX=evt.pageX-this.offsetLeft;
		var textY=evt.pageY-this.offsetTop;
//		alert(textX,textY);
//		獲取用戶輸入的信息
//		window.prompt();
		var userVal= window.prompt("請輸入你要輸入的文字：","");
//		alert(userVal);
		if(userVal!=null){
			cxt.fillText(userVal,textX,textY);
		}
		
	}
	
	canvas.οnmοusemοve=null;
	canvas.οnmοuseup=null;
	canvas.οnmοuseοut=null;
	
	
	
}
//放大鏡函數
function drawMagnifier(num){
	setStatus(actions,num,1)
//	用戶輸入的數據大小
	var scale=window.prompt("請輸入放大的百分比","100");
//把數據轉成對canvas畫布的大小
	var scaleW=880*scale/100;
	var scaleH=410*scale/100;
//將數據設置到對應html標籤上
	canvas.style.width=parseInt(scaleW)+"px";
	canvas.style.height=parseInt(scaleH)+"px";
	
	
	
}
//劃線函數
function drawLine(num){
	setStatus(actions,num,1)
	canvas.οnmοusedοwn=function(evt){
		evt=window.event||evt;//區分瀏覽器兼容瀏覽器
//		獲取起始點座標(相對於畫布的)
//		獲取頁面頂端距離
//		evt.pageX,evt.pageY;
//		畫布距離頂端距離
//		this.offsetTop, this.offsetHeight
		
//		當前鼠標距離互補的距離
		var startX = evt.pageX-this.offsetLeft;
		var startY = evt.pageY-this.offsetTop;
//		直線的開始點
		cxt.beginPath();//儘量寫上，不寫可能會受到干擾
		cxt.moveTo(startX,startY);
		
		
	}
	

	canvas.οnmοusemοve=null;//註銷掉不做的事件
	canvas.οnmοuseοut=null;//鼠標移走沒有事件
//	鼠標鍵擡起來的時候
	canvas.οnmοuseup=function(evt){
		var endX=evt.pageX-this.offsetLeft;
		var endY=evt.pageY-this.offsetTop;
//		開始點和結束點連接起來了
		cxt.lineTo(endX,endY);
		cxt.closePath();
		cxt.stroke();
	}
	
}
//畫圈函數
//變量設置全局標量
var arcX=0;
var arcY=0;
function drawArc(num){
	setStatus(actions,num,1)
	canvas.οnmοusedοwn=function(evt){
//		獲取圓心的位置
		evt=window.event||evt;
		arcX=evt.pageX-this.offsetLeft;
		arcY=evt.pageY-this.offsetTop;
	}
	canvas.οnmοuseup=function(evt){
//		獲取半徑(實際是一個座標)
		evt=window.event||evt;
		var endX=evt.pageX-this.offsetLeft;
		var endY=evt.pageY-this.offsetTop;
//		計算兩點的距離也就是圓的r
		var a=endX-arcX;
		var b=endY-arcY;
//		半徑c等於
		var c=Math.sqrt(a*a+b*b);
		cxt.beginPath();
		cxt.arc(arcX,arcY,c,0,360,false);
		cxt.closePath();
		cxt.stroke();
		
	}
	canvas.οnmοusemοve=null;
	canvas.οnmοuseοut=null;
}

//設置矩形全局變量
var rectX=0;
var rectY=0;
var rectW=0;
var rectH=0;
//畫矩形函數
function drawRect(num){
	setStatus(actions,num,1)
	
	canvas.οnmοusedοwn=function(evt){
		evt=window.event||evt;
		//獲取矩形對角線的第一個點座標
		rectX=evt.pageX-this.offsetLeft;
		rectY=evt.pageY-this.offsetTop;
		
	}
	canvas.οnmοuseup=function(evt){
		evt=window.event||evt;
		//		先獲取鼠標當前座標
		var endX=evt.pageX-this.offsetLeft;
		var endY=evt.pageY-this.offsetTop;
		//計算矩形的寬和高
		 rectW=endX-rectX;
		 rectH=endY-rectY;
		//		開始畫矩形
		cxt.strokeRect(rectX,rectY,rectW,rectH);
	}
	
	canvas.οnmοusemοve=null;
	canvas.οnmοuseοut=null;
	
	
	
	
	
}
//畫多邊行（三角形）函數
//全局變量
var polyX=0;
var polyY=0;
function drawPoly(num){
	setStatus(actions,num,1)
	canvas.οnmοusedοwn=function(evt){
		evt=window.event||evt;
		polyX=evt.pageX-this.offsetLeft;
		polyY=evt.pageY-this.offsetTop;
		
	}
	canvas.οnmοuseup=function(evt){
		evt=window.event||evt;
		var endX=evt.pageX-this.offsetLeft;
		var endY=evt.pageY-this.offsetTop;
		
//		將畫筆移動到右下角的頂點
		cxt.moveTo(endX,endY);
//		計算左下角的頂點座標		
		var lbX=2*polyX-endX;
		var lbY=endX;
		cxt.lineTo(lbX,lbY);
//		設置第三個頂點的座標
		var tmpC=2*(endX-polyX);
		var tmpA=endX-polyX;
		var tmpB=Math.sqrt(tmpC*tmpC-tmpA*tmpA);
//		計算頂點座標
//	endY-tmpB是頂點的y座標,polyX是頂點的X座標
//		畫圖三角形
		cxt.lineTo(polyX,endY-tmpB);
		cxt.closePath();
		cxt.stroke();


	}
	
	canvas.οnmοusemοve=null;
	canvas.οnmοuseοut=null;
	
	
	
	
	
}
//畫實心圓函數
function drawArcfill(num){
	setStatus(actions,num,1)
	
	canvas.οnmοusedοwn=function(evt){
//		獲取圓心的位置
		evt=window.event||evt;
		arcX=evt.pageX-this.offsetLeft;
		arcY=evt.pageY-this.offsetTop;
	}
	canvas.οnmοuseup=function(evt){
//		獲取半徑(實際是一個座標)
		evt=window.event||evt;
		var endX=evt.pageX-this.offsetLeft;
		var endY=evt.pageY-this.offsetTop;
//		計算兩點的距離也就是圓的r
		var a=endX-arcX;
		var b=endY-arcY;
//		半徑c等於
		var c=Math.sqrt(a*a+b*b);
		cxt.beginPath();
		cxt.arc(arcX,arcY,c,0,360,false);
		cxt.closePath();
		cxt.fill();
	}
	canvas.οnmοusemοve=null;
	canvas.οnmοuseοut=null;
	
	
}
////設置矩形全局變量,全局變量設置一次就行行了
//var rectX=0;
//var rectY=0;
//畫填充矩形函數
function drawRectfill(num){
	setStatus(actions,num,1)
	
	canvas.οnmοusedοwn=function(evt){
		evt=window.event||evt;
		//獲取矩形對角線的第一個點座標
		rectX=evt.pageX-this.offsetLeft;
		rectY=evt.pageY-this.offsetTop;
		
	}
	canvas.οnmοuseup=function(evt){
		evt=window.event||evt;
		//		先獲取鼠標當前座標
		var endX=evt.pageX-this.offsetLeft;
		var endY=evt.pageY-this.offsetTop;
		//計算矩形的寬和高
		var rectW=endX-rectX;
		var rectH=endY-rectY;
		//		開始畫矩形
		cxt.fillRect(rectX,rectY,rectW,rectH);
	}
	
	canvas.οnmοusemοve=null;
	canvas.οnmοuseοut=null;
	
	



	
}

//線寬函數

function setLineWidth(num){
	
	setStatus(widths,num,1)
	
	switch(num)
	{
		case 0:cxt.lineWidth=1;
		break;
		
		case 1:cxt.lineWidth=3;
		break;
		
		case 2:cxt.lineWidth=5;
		break;
		
		case 3:cxt.lineWidth=8;
		break;
		
		default:cxt.lineWidth=1;
	}
	
	
}

//獲取顏色

function setColor(obj,num){
	setStatus(colors,num,0)
//	設置顏色和填充顏色
	cxt.strokeStyle=obj.id;
	cxt.fillStyle=obj.id;
	
	
}

4.注意小程序裏的圖片在項目裏，這裏是整個程序的下載鏈接：http://download.csdn.net/detail/yelang0111/9915930

更新代碼：http://download.csdn.net/detail/yelang0111/9916764

程序有不完整的地方後面會持續更新，也歡迎大家一起改。

yelang0111

發佈了30 篇原創文章 · 獲贊 16 · 訪問量 2萬+

私信關注

JavaScript（四）

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

HTML6（六）

javaScript(七)

HTML5(三)

一個簡單的函數封裝（JavaScript+html）

仿淘寶輸入框（JavaScript+html）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結