js 鼠标拖拽绘画,自动设置大小,颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="Fly">
<title>Title</title>
<style>
*{ margin: 0; padding: 0; font-family:Microsoft yahei,serif;}
li{ list-style:none;}
#box{
height: 650px;
}
#box .tool{
height: 50px;
text-align: center;
line-height: 50px;
}
#box .tool select{
margin-right: 20px;
}
#box .tool input[type=button]{
width: 50px;
height: 25px;
}
#box .huaban{
overflow: hidden;
height: 600px;
border: 1px dashed #b500ff;
}
</style>
</head>
<body>
<div id="box">
<p class="tool">
<span>粗细</span>
<select id="select1">
<option value="5">5</option>
<option value="7">7</option>
<option value="9">9</option>
<option value="11">11</option>
<option value="13">13</option>
</select>
<span>颜色</span>
<select name="" id="select2">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
<option value="blue">蓝色</option>
<option value="pink">粉色</option>
</select>
<input type="button" value="清空" id="clear">
<input type="button" value="回退" id="back">
</p>
<div class="huaban"></div>
</div>
<script>
var oH = document.querySelector("#box .huaban"),
oS1 = document.getElementById("select1"),
oS2 = document.getElementById("select2"),
oClear = document.getElementById("clear"),
oBack = document.getElementById("back"),
arrH = [];
oClear.onclick = function () {
oH.innerHTML = "";
};
oBack.onclick = function () {
console.log(arrH.length);
if ( arrH.length ){
var aP = arrH[arrH.length-1];
console.log(aP)
for (var i = 0; i < aP.length; i++) {
oH.removeChild(aP[i] );
}
arrH.pop();
}
};
oH.onmousedown = function () {
var This = this;
arrH[arrH.length] = [];
console.log(arrH[arrH.length]);
console.log(arrH)
document.onmousemove = function (e) {
e = e || window.event;
var x = e.clientX,
y = e.clientY,
oP = this.createElement("p");
oP.style.position = "absolute";
oP.style.left = x + 'px';
oP.style.top = y + 'px';
oP.style.width = oS1.value + "px";
oP.style.height = oS1.value + "px";
oP.style.backgroundColor = oS2.value;
This.appendChild(oP);
arrH[arrH.length-1].push(oP);
};
document.onmouseup = function () {
this.onmousemove = null;
this.onmouseup = null;
};
return false;
}
</script>
</body>
</html>