canvas實現簡單的畫圖功能
功能描述：
有紅綠藍三種顏色的畫筆，可以選擇畫筆的粗細，畫出的圖可以保存到右邊的六個畫框中。當右邊的六個畫框都畫滿之後，便不能繼續保存來了。可以清除畫框，清除畫布。保存的圖片可以右擊保存爲png格式。
實現效果如圖所示：
實現代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var bot;//畫布div
var X,Y,X1,Y1;//座標
var flag=0;
var time;//定時器ID
var color=0;//記住所選顏色
var lineW=2;//畫筆粗細
var canvas;//創建畫布
var context;//獲取上下文
var isMouseDown=false;//記錄鼠標是否按下
window.onload=function(){
//創建畫布
canvas=document.getElementById("can");
//獲取上下文
context=canvas.getContext("2d");
bot=document.getElementById("bottom");
bot.onmousedown=mouseDownAction;
bot.onmousemove=mouseMoveAction;
document.onmouseup=mouseUpAction;
}
/**
*選中畫筆顏色
*/
function pen_click(num){
var chk=document.getElementsByTagName("input");
for(var i=0;i<chk.length;i++){
if(i==num){
chk[i].checked=true;
color=i;
}else {
chk[i].checked="";
}
}
}
/**
* 畫筆粗細
*/
function line_wid(num){
lineW=num;
}
/**
*鼠標按下
*/
function mouseDownAction(e){
isMouseDown=true;
//記錄下鼠標點擊的時候的位置
X= e.offsetX;
Y= e.offsetY;
}
/**
*鼠標移動
*/
function mouseMoveAction(e){
if(isMouseDown){
X1= e.offsetX;
Y1= e.offsetY;
drowline(X,Y,X1,Y1);
flag++;
}
}
/**
*鼠標彈起來
*/
function mouseUpAction(e){
isMouseDown=false;
flag=0;
}
/**
* 繪製
*/
function drowline(num1,num2,num3,num4){
//開啓新的路徑
if(flag)
context.beginPath();
//移動畫筆的初始位置
context.moveTo(num1,num2);
context.lineWidth=lineW;
if(color==0){
context.strokeStyle="red";
}else if(color==1){
context.strokeStyle="green";
}else if(color==2){
context.strokeStyle="blue";
}
//移動畫筆的結束位置
context.lineTo(num3,num4);
//開始繪製
context.stroke();
if(flag!=0){
X=X1;
Y=Y1;
}
}
function save_pic(){//保存畫圖
var div=document.getElementsByClassName("div");
if(div[div.length-1].innerHTML!=""){
alert("存儲空間已滿，無法保存，請清除空間！")
}
var str=canvas.toDataURL("image/png",0.92);
for(var i=0;i<div.length;i++){
if(div[i].innerHTML==""){
var s="<img src='"+str+"' style='width: 250px;height: 250px;'>";
div[i].innerHTML=s;
break;
}
}
}
function clear_pic(){//清除畫布
context.clearRect(0,0,500,500);
}
function clear_save(){//清除保存
var div=document.getElementsByClassName("div");
for(var i=0;i<div.length;i++){
div[i].innerHTML="";
}
}
</script>
</head>
<body>
<div id="left">
<div id="top">
<div class="top_left"><!-- 畫筆顏色選擇 -->
<img src="img/pen_red.gif" style="border: 2px solid transparent" onclick="pen_click(0)"><input type="checkbox" style="position: absolute;top: 38px;left: 88px" checked onclick="pen_click(0)">
<img src="img/pen_green.gif" style="border: 2px solid transparent" onclick="pen_click(1)"><input type="checkbox" style="position: absolute;top: 38px;left: 145px" onclick="pen_click(1)">
<img src="img/pen_blue.gif" style="border: 2px solid transparent" onclick="pen_click(2)"><input type="checkbox" style="position: absolute;top: 38px;left: 202px" onclick="pen_click(2)">
</div>
<div class="top_right"><!-- 畫筆粗細選擇 -->
<img src="img/pen_thin.gif" onclick="line_wid(2)">
<img src="img/pen_medium.gif" onclick="line_wid(4)">
<img src="img/pen_thick.gif" onclick="line_wid(8)">
</div>
</div>
<div id="bottom"><!-- 畫板 -->
<canvas id="can" width="500" height="500"></canvas>
</div>
</div>
<div id="right">
<div id="div1" class="div"></div>
<div id="div2" class="div"></div>
<div id="div3" class="div"></div>
<div id="div4" class="div"></div>
<div id="div5" class="div"></div>
<div id="div6" class="div"></div>
</div>
<div class="bottom">
<hr>
<input type="button" value="保存圖片" style="position: absolute;top: 560px;left: 0px" onclick="save_pic()">
<input type="button" value="清除畫布" style="position: absolute;top: 560px;left: 66px"onclick="clear_pic()">
<input type="button" value="清除保存" style="position: absolute;top: 560px;left: 132px"onclick="clear_save()">
</div>
</body>
<style>
*{
margin: 0px;
padding: 0px;
}
#left{
width: 500px;
height: 550px;
float: left;
}
.top_left{
margin-left: 50px;
float: left;
}
.top_right{
margin-right: 50px;
float: right;
}
#bottom{
width: 500px;
height: 500px;
border: solid 2px coral;
float: left;
}
#right{
width: 826px;
height: 550px;
border: solid 2px red;
float: right;
}
.div{
width: 250px;
height: 250px;
border: solid 2px orange;
margin: 15px 0 0 15px;
float: left;
}
</style>
</html>