小案例 JS简陋的画板

        今天整理了JavaScript的事件对象，就突然地想用鼠标移动事件写一个小画板；
        历经坎坷还是完成了，简陋到不忍直视就是了；

页面布局：

h5部分：

<center>
    <input type="text" name="line" id="line" placeholder="请输入画笔大小(px)" /> &nbsp;
    <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的话应该会便捷+好看很多很多很多…嘛，纯当小萌新闲到没事干呗；