關(guān)于我們

html5+JQery制作簡易涂鴉板

標(biāo)簽：發(fā)布日期：2014-04-25 00:00:00  674

效果圖如下

<!DOCTYPE html>

<html>

<head>

<style>

#eraseImg{ /*橡皮樣式*//**/

border:solid;

color:gray;

border-radius: 118px;

width: 5px;

height: 5px;

position: absolute;

display: none;

}

.eraseSeries{ /*橡皮大小單選按鈕組的排列，此div不單獨(dú)占一行*/

display: inline-block;

}

</style>

var c;//獲取到的2d畫板

var painting = false;//判斷是否正在繪畫，即鼠標(biāo)左鍵是否長按下去

var canvas;//畫板

$(function(){

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

canvas=document.getElementById("myCanvas");

c=canvas.getContext("2d");

c.lineCap="round";//設(shè)置筆跡邊角，否則筆跡會(huì)出現(xiàn)斷層

c.strokeStyle="black";//筆跡的顏色

c.lineWidth=5;//筆跡的粗細(xì)

$("#color").change(function(){//筆跡顏色發(fā)生改變時(shí)

if(eraseFlag==true)//處在擦皮狀態(tài)

{

$("#erase").trigger("click");//自動(dòng)觸發(fā)橡皮的點(diǎn)擊事件，以返回到畫筆狀態(tài)

}

c.strokeStyle=$(this).val();//設(shè)置畫筆狀態(tài)

c.lineWidth=$(this).val();

});

$("#fontSize").change(function(){//畫筆粗細(xì)發(fā)生改變

if(eraseFlag==true)//同上

{

$("#erase").trigger("click");

}

c.lineWidth=$(this).val();

c.strokeStyle=$("#color").val();

//eraseFlag=false;

});

$(".eraseSeries").click(function(){//橡皮大小發(fā)生改變

var size=$('input[name="eraseSize"]:checked').val();//獲取到橡皮單選按鈕組的選中值

sizeE=size;//將該值傳到全局變量上，sizeE需要用來控制橡皮樣式的位置

c.lineWidth=size;

$("#eraseImg").css({"width" :size+"px","height":size+"px"});//橡皮樣式大小發(fā)生改變

});

$("#erase").toggle(function(){//橡皮按鈕的點(diǎn)擊翻轉(zhuǎn)事件

c.save();//保持上次設(shè)置的狀態(tài)

eraseFlag=true;

c.strokeStyle="white";

$("#erase").text("畫筆");//改變按鈕上的文字

$(".eraseSeries").show('fast');//橡皮單選組出現(xiàn)

// $("#eraseImg").show();

sizeE=5;

},function(){

eraseFlag=false;

$("#erase").text("橡皮");

$(".eraseSeries").hide('fast');

c.restore();//恢復(fù)上次畫筆的狀態(tài)（包括顏色，粗細(xì)等）

});

//setInterval(paint,2);

});

var p_x;//上次鼠標(biāo)位置

var p_y;

var p_x_now;//當(dāng)前瞬間鼠標(biāo)位置

var p_y_now;

var eraseFlag=false;

var sizeE;//橡皮大小

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

// alert(sizeE);

p_x= e.clientX;//獲取位置，并置為上次鼠標(biāo)位置

p_y= e.clientY;

painting = true;//畫筆啟動(dòng)標(biāo)志

});

$(document).mousemove(function(e){//鼠標(biāo)移動(dòng)觸發(fā)事件

if(eraseFlag==true&& e.clientY>30)//橡皮處在激活狀態(tài)，并且鼠標(biāo)Y的位置大于30，也即鼠標(biāo)在畫板內(nèi)

{

//橡皮圖像跟隨鼠標(biāo)而動(dòng)

$("#eraseImg").animate({left: e.clientX-sizeE+"px",top: e.clientY-sizeE+"px"},0).show('fast');

}

else

{

$("#eraseImg").hide('fast');

}

if(painting==true)//處于畫筆激活狀態(tài)

{

//alert(1);

p_x_now= e.clientX;//當(dāng)前瞬間的鼠標(biāo)位置

p_y_now= e.clientY;

c.beginPath();//開始路徑

//曲線是由一段段非常小的直線構(gòu)成，計(jì)算機(jī)運(yùn)算速度很快，這是一種以直線迭代畫曲線的方式

c.moveTo(p_x-5-canvas.offsetLeft,p_y-5-canvas.offsetTop);//移動(dòng)到起始點(diǎn)

c.lineTo(p_x_now-5-canvas.offsetLeft,p_y_now-5-canvas.offsetTop);//從起始點(diǎn)畫直線到終點(diǎn)

c.stroke();

c.closePath();//封閉路徑，這個(gè)很重要，如果路徑不封閉，

// 那么只要canvas顏色發(fā)生改變，所有的之前畫過的顏色都發(fā)生改變

p_x = p_x_now;//一次迭代后講當(dāng)前的瞬間坐標(biāo)值賦給上次鼠標(biāo)坐標(biāo)值

p_y = p_y_now;

}

});

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

painting=false;//凍結(jié)畫筆

});

</script>

</head>

<body>

<div >

</select>

</select>

<input type="radio" name="eraseSize" value="5" checked/>5

<input type="radio" name="eraseSize" value="10"/>10

<input type="radio" name="eraseSize" value="15"/> 15

<input type="radio" name="eraseSize" value="20"/> 20

<input type="radio" name="eraseSize" value="30"/>30

</div>

</div>

</body>

</html>

国产精品成人VA在线观看,亚洲日韩在线中文字幕综合,亚洲AV电影天堂男人的天堂,久久人人爽人人爽人人av东京热

News新聞

相關(guān)關(guān)鍵詞

關(guān)于我們

最新文章

html5+JQery制作簡易涂鴉板

相關(guān)文章