Home > Article > Web Front-end > JavaScript simple sketchpad development

JavaScript simple sketchpad development

高洛峰Original: 2016-12-09 13:57:001175browse

The example in this article shares the method of making a simple javascript drawing board for your reference. The specific content is as follows

html:

<body id="bodys">
<span id="eraser">
清除所有
</span>
<span id="colorbtn">
笔画颜色
</span>
<input type="range" name="ram" id="ram" min="1" max="20" step="1" value="10"/>
<label id="ramnum">字体大小:10px</label>
<ul id="colorpanel">
<li>黑色</li>
<li>红色</li>
<li>绿色</li>
<li>蓝色</li>
</ul>
</body>

CSS:

*{
margin: 0;
padding: 0;
 }
.box_black{
background-color: black;
position: absolute;
}
.box_red{
background-color: red;
position: absolute;
}
.box_green{
background-color: green;
position: absolute;
}
.box_blue{
background-color: blue;
position: absolute;
}
#eraser{
width: 80px;
height: 50px;
background-color: brown;
display: inline-block;
text-align: center;
line-height: 50px;
cursor: pointer;
}
#colorbtn{
width: 80px;
height: 50px;
background-color: tomato;
display: inline-block;
text-align: center;
line-height: 50px;
cursor: pointer;
}
#colorpanel{
width: 80px;
height: 200px;
list-style: none;
margin-left: 88px;
display: none;
}
#colorpanel>li{
width: 80px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: aquamarine;
display: inline-block;
cursor: pointer;
}
#colorpanel>li:hover{
background-color: orange;
}

javascript:

window.onload=function(){
 
   //把类名存成一个数组
 var classname=["box_black","box_red","box_green","box_blue"];
 //默认类名为box_black
 var clsname=classname[0];
 var oBody=document.getElementById("bodys");
 var oDiv=oBody.getElementsByTagName("div");
 var eraser=document.getElementById("eraser");
 var colorbtn=document.getElementById("colorbtn");
 var colorpanel=document.getElementById("colorpanel");
 var ram=document.getElementById("ram");
 var ramnum=document.getElementById("ramnum");
   colorbtn.onmouseover=function(){
   colorpanel.style.display="block";
   }
    colorbtn.onmouseout=function(){
   colorpanel.style.display="none";
   }
    colorpanel.onmouseover=function(){
    this.style.display="block";
    }
    colorpanel.onmouseout=function(){
    this.style.display="none";
    }
    for(var i=0;i<colorpanel.children.length;i++){
    colorpanel.children[i].index=i;
    colorpanel.children[i].onclick=function(){
    //鼠标点击li切换类名来改变样式
    clsname=classname[this.index];
    colorpanel.style.display="none";
    }
    }
    //定义默认字体大小为10px
    var WIDTH="10px";
    var HEIGHT="10px";
    //通过滑动range来改变字体大小
    ram.onmousemove=function(){
    WIDTH=HEIGHT=ram.value+"px";
    ramnum.innerHTML="字体大小:"+WIDTH;
    }
    //鼠标点击屏幕，通过滑动鼠标不停创建div属性节点，并且给它设置样式
document.onmousedown=function(){
 document.onmousemove=function(event){
 var oevent=event||window.event;
 var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
 var scrollleft=document.documentElement.scrollLeft||document.body.scrollLeft;
 var box=document.createElement("div");
    box.className=clsname;
    box.style.width=WIDTH;
    box.style.height=HEIGHT;
    oBody.appendChild(box);
    box.style.left=scrollleft+oevent.clientX+"px";
    box.style.top=scrolltop+oevent.clientY+"px";
}
}
//当鼠标按键松开，注销鼠标滑动事件
document.onmouseup=function(){
document.onmousemove=null;
}
//当橡皮差按钮被点击，遍历所有div并且把它们一一从父节点里面移除
eraser.onclick=function(){
var oDiv=oBody.getElementsByTagName("div");
for(var i=0;i<oDiv.length;i++){
oBody.removeChild(oDiv[i]);
}
}
//以下为取消按钮的冒泡事件，因为我们点击按钮是不能绘制div的
eraser.onmousedown=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
colorbtn.onmousedown=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
colorpanel.onmousedown=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
ram.onmousedown=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
}
 
}

This is written based on JavaScript events, which is relatively simple. In fact, it can be further optimized. Let’s look at the renderings below.

JavaScript simple sketchpad development

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：javascript carousel chart algorithmNext article：javascript carousel chart algorithm

See more

JavaScript simple sketchpad development

Related articles