今天整理了JavaScript的事件对象,就突然地想用鼠标移动事件写一个小画板;
历经坎坷还是完成了,简陋到不忍直视就是了;
页面布局:
h5部分:
<center>
<input type="text" name="line" id="line" placeholder="请输入画笔大小(px)" />
<div id="area"></div>
<div class="wordA">
x:<span id="ha">0</span>
y:<span id="wa">0</span>
</div>
</center>
css部分:
<style>
#area{
height: 600px;
width: 600px;
border: 1px solid #000;
position: relative;
}
span{
margin-right: 40px;
text-align: left;
}
.wordA{
width:600px;
text-align: left;
margin-top:10px;
}
input[type=text]{
border: 1px solid #000;
margin-bottom:10px;
position:absolute;
top:28px;
left:400px;
z-index:11;
}
</style>
初步构思简简单单:鼠标移入画板,单击开始作画,双击结束现在正在画的那一笔;
利用mousemove事件类型获取鼠标当前的位置,在该位置上创建一个带有颜色的节点,无数个节点连接起来,营造出“仿佛有画上那么一笔”的感觉(笑);
JS部分:
<script>
function $(id){
return document.getElementById(id);
}
var drawing = false; //判断能否进行作画
$("area").addEventListener("click",function(){
drawing = true;
$("area").addEventListener("mousemove",function(evt){
var e = evt || event ;
if(drawing == true){
$("ha").innerHTML = e.offsetX;
$("wa").innerHTML = e.offsetY;
drawLine(e.offsetX,e.offsetY);
}
else{
e.preventDefault();
}
});
});
$("area").addEventListener("dblclick",function(){
drawing = false;
});
function drawLine(x,y){
var line = $("line").value;
var d = document.createElement('div');
d.style.width = line + 'px';
d.style.height = line + 'px';
d.style.background = "red";
d.style.borderRadius = "50%";
d.style.position = "absolute";
d.style.left = x + 'px';
d.style.top = y + 'px';
$("area").appendChild(d);
}
</script>
最后实现效果截图:
果然,丑到爆炸~
其实用canvas的话应该会便捷+好看很多很多很多…嘛,纯当小萌新闲到没事干呗;