javascript简易画板开发


Posted in Javascript onApril 12, 2020

本文实例为大家分享了制作javascript简易画板的方法,供大家参考,具体内容如下

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;
}
}

}

这是基于javascript的事件基础写的,比较简易,其实还可以进一步进行优化。下面来看效果图。

javascript简易画板开发

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
一文搞懂redux在react中的初步用法
Jun 09 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 #Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 #Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 #Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 #Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 #Javascript
基于angularJS的表单验证指令介绍
Oct 21 #Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 #Javascript
You might like
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
python操作mysql数据库
2017/03/05 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
详解python持久化文件读写
2019/04/06 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
python requests证书问题解决
2019/09/05 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
个人收入证明模板
2014/09/18 职场文书
晚会闭幕词
2015/01/28 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
Go语言空白表示符_的实例用法
2021/07/04 Golang
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript