<td id="wubpt"><tr id="wubpt"><th id="wubpt"></th></tr></td>^{<style id="wubpt"></style>}

html5+javascript制作簡易畫板附圖

2024-05-06 16:04:35

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了使用html5+javascript制作的簡易畫板,需要的朋友可以參考下

見圖：

代碼如下：

復制代碼代碼如下:

<!DOCTYPE html>
<html>
<meta http-equiv="content-type" Content="text/html;charset=utf-8">
<head>

<title>簡易畫板</title>

<style>
#eraseImg{ /*橡皮樣式*//**/
border:solid;
color:gray;
border-radius: 118px;
width: 5px;
height: 5px;
position: absolute;
display: none;

}
.eraseSeries{ /*橡皮大小單選按鈕組的排列，此div不單獨占一行*/
display: inline-block;
}

</style>
<script src="jquery-1.7.1.js"></script>
<script>

var c;//獲取到的2d畫板
var painting = false;//判斷是否正在繪畫，即鼠標左鍵是否長按下去
var canvas;//畫板
$(function(){

$(".eraseSeries").hide();//初始狀態單選按鈕組隱藏

canvas=document.getElementById("myCanvas");
c=canvas.getContext("2d");
c.lineCap="round";//設置筆跡邊角，否則筆跡會出現斷層
c.strokeStyle="black";//筆跡的顏色
c.lineWidth=5;//筆跡的粗細
$("#color").change(function(){//筆跡顏色發生改變時
if(eraseFlag==true)//處在擦皮狀態
{
$("#erase").trigger("click");//自動觸發橡皮的點擊事件，以返回到畫筆狀態
}
c.strokeStyle=$(this).val();//設置畫筆狀態
c.lineWidth=$(this).val();

});

$("#fontSize").change(function(){//畫筆粗細發生改變
if(eraseFlag==true)//同上
{
$("#erase").trigger("click");
}
c.lineWidth=$(this).val();
c.strokeStyle=$("#color").val();
//eraseFlag=false;
});

$(".eraseSeries").click(function(){//橡皮大小發生改變
var size=$('input[name="eraseSize"]:checked').val();//獲取到橡皮單選按鈕組的選中值
sizeE=size;//將該值傳到全局變量上，sizeE需要用來控制橡皮樣式的位置
c.lineWidth=size;
$("#eraseImg").css({"width" :size+"px","height":size+"px"});//橡皮樣式大小發生改變
});

$("#erase").toggle(function(){//橡皮按鈕的點擊翻轉事件
c.save();//保持上次設置的狀態
eraseFlag=true;
c.strokeStyle="white";

$("#erase").text("畫筆");//改變按鈕上的文字
$(".eraseSeries").show('fast');//橡皮單選組出現
// $("#eraseImg").show();
sizeE=5;

},function(){
eraseFlag=false;
$("#erase").text("橡皮");
$(".eraseSeries").hide('fast');
c.restore();//恢復上次畫筆的狀態（包括顏色，粗細等）
});

//setInterval(paint,2);

});

var p_x;//上次鼠標位置
var p_y;
var p_x_now;//當前瞬間鼠標位置
var p_y_now;
var eraseFlag=false;
var sizeE;//橡皮大小

$(document).mousedown(function(e){//鼠標按下觸發事件

// alert(sizeE);
p_x= e.clientX;//獲取位置，并置為上次鼠標位置
p_y= e.clientY;
painting = true;//畫筆啟動標志

});
$(document).mousemove(function(e){//鼠標移動觸發事件
if(eraseFlag==true&& e.clientY>30)//橡皮處在激活狀態，并且鼠標Y的位置大于30，也即鼠標在畫板內
{

//橡皮圖像跟隨鼠標而動
$("#eraseImg").animate({left: e.clientX-sizeE+"px",top: e.clientY-sizeE+"px"},0).show('fast');
}
else
{
$("#eraseImg").hide('fast');
}
if(painting==true)//處于畫筆激活狀態
{
//alert(1);
p_x_now= e.clientX;//當前瞬間的鼠標位置
p_y_now= e.clientY;
c.beginPath();//開始路徑
//曲線是由一段段非常小的直線構成，計算機運算速度很快，這是一種以直線迭代畫曲線的方式
c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop);//移動到起始點
c.lineTo(p_x_now-5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//從起始點畫直線到終點

c.stroke();
c.closePath();//封閉路徑，這個很重要，如果路徑不封閉，
// 那么只要canvas顏色發生改變，所有的之前畫過的顏色都發生改變
p_x = p_x_now;//一次迭代后講當前的瞬間坐標值賦給上次鼠標坐標值
p_y = p_y_now;
}

});

$(document).mouseup(function(e){//鼠標松開觸發事件

painting=false;//凍結畫筆
});

</script>
</head>
<body>
<div >
<select > 
<option value="red">紅色</option>
<option value="yellow">黃色</option>
<option value="blue">藍色</option>
<option value="black" selected>黑色</option>
<option value="green">綠色</option>
</select>

<select> 
<option value=5 selected>5</option>
<option value=10>10</option>
<option value=15>15</option>
<option value=20>20</option>
<option value=30>30</option>
</select>
<button>擦皮</button> 
<div> 
<input type="radio" value="5" checked/>5
<input type="radio" value="10"/>10
<input type="radio" value="15"/> 15
<input type="radio" value="20"/> 20
<input type="radio" value="30"/>30
</div>
</div>


<canvas></canvas> 

<div> 
</div>

</body>
</html>