以电脑为画板，以鼠标为画笔的画布功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画布</title>
<style>
#pos{position:absolute;left:0;bottom:0;}
em{border-radius:50%;position:absolute;left:0;top:0;}
input{position:relative;z-index:1;}
</style>
</head>
<body>
<input type="button" id="btn1" value="+">
<input type="button" id="btn2" value="-">
<input type="color" id="color" >
<span id="pos"></span>
<script type="text/javascript">
var opos=document.getElementById("pos");
document.onmousemove=function(eve){
var e=eve || window.event;
opos.innerHTML=e.clientX +","+e.clientY;
var em=document.createElement("em");
document.body.appendChild(em);
em.style.left=e.clientX+"px";
em.style.top=e.clientY+"px";
em.style.width=w+"px";
em.style.height=h+"px";
em.style.background=color;
}
var obtn1=document.getElementById("btn1");
var obtn2=document.getElementById("btn2");
var ocolor=document.getElementById("color");
var w=h=20;
var color="#000";
obtn1.onclick=function(){
h+=5;
w+=5;
}
obtn2.onclick=function(){
if(w<=5){
w=h=5;
}else{
w-=5;
h-=5;
}
}
ocolor.onchange=function(){
color=ocolor.value;
}
</script>
</body>
</html>
扫一扫
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
