JS 实现简单的画图

设置div的css样式

<style>

.box{

position:absolute;

}

<style/>

// 给document添加鼠标按下事件

document.onmousedown=function( ){

// 嵌套一个移动事件 mousemove  

document.onmousemove=function(e){

// 1.在页面中创建一个div

var div=document.creatElement("div");



// 2.为这个div取一个类名

div.style.className="box";



// 3.设置div的宽高

var width=5;

var height=10;

div.style.width=width+"px";

div.style.width=height+"px";



// 4.添加定位，page 相对于页面的偏移值

div.style.left=e.pageX+"px"; // e的值需要与function的参数值保持一致

div.style.top=e.pageY+"px";



// 5.设置div的背景颜色

div.style.backgroundColor="black";



// 6.将div添加到body中

document.body.appendChild (div);

}

// 嵌套鼠标松开事件 鼠标松开绘图停止

document.onmouseup=function() {

document.onmousemove=null;

}

}

效果如图：