一個簡單的小事例，利用canvas實(shí)現(xiàn)畫板效果。
實(shí)現(xiàn)原理：
鼠標(biāo)事件+canvas
效果圖：
image.png
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: gainsboro;
}
#cav{
background: white;
position: relative;
}
#sel{
display: block;
width: 1190px;
height: 30px;
background: white;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 獲得畫板
var cav = document.getElementById("cav");
// 獲得繪畫環(huán)境
var cv = cav.getContext('2d');
// 設(shè)置畫筆默認(rèn)顏色及粗細(xì)
cv.lineWidth=10;
//鼠標(biāo)按下事件
cav.onmousedown = function(e){
ev = window.event||e;
var s_l = ev.offsetX||ev.layerX;
var s_t = ev.offsetY||ev.layerY;
//開始繪制路徑
cv.beginPath();
//畫筆起始位置
cv.moveTo(s_l,s_t);
// 鼠標(biāo)移動事件
cav.onmousemove = function(e){
var over_ev = window.event||e;
var over_l = over_ev.offsetX||over_ev.layerX;
var over_t = over_ev.offsetY||over_ev.layerY;
//結(jié)束位置
cv.lineTo(over_l,over_t);
//繪制線條
cv.stroke();
}
}
//鼠標(biāo)抬起事件
cav.onmouseup = function(){
//取消鼠標(biāo)移動事件
cav.onmousemove = null;
}
//顏色改變事件
document.getElementById("ys").onchange = function(){
cv.strokeStyle = this.value;
}
//改變粗細(xì)
document.getElementById("cx").onchange = function(){
var cx = this.value;
cv.lineWidth = cx;
document.getElementById("cx_txt").innerHTML = cx;
}
//橡皮擦
document.getElementById("xpc").onclick = function(){
alert('開啟橡皮擦')
cv.strokeStyle = 'white';
}
}
</script>
</head>
<body>
<div id="sel">
畫筆顏色：<input type="color" name="" id="ys" value="" />
畫筆粗細(xì)：<input type="range" min="1" max="50" value="10" id="cx" />
<span id="cx_txt">10</span>
<input type="button" id="xpc" value="橡皮擦" />
</div>
<canvas id="cav" width="1200px" height="800px"></canvas>
</body>
</html>
如有問題歡迎交流。
如轉(zhuǎn)載請注明出處，謝謝！
