javascript开发简易画板

HTML

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.οnlοad=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.οnmοuseοver=function(){
colorpanel.style.display="block";
}
colorbtn.οnmοuseοut=function(){
colorpanel.style.display="none";
}
colorpanel.οnmοuseοver=function(){
this.style.display="block";
}
colorpanel.οnmοuseοut=function(){
this.style.display="none";
}
for(var i=0;i<colorpanel.children.length;i++){
colorpanel.children[i].index=i;
colorpanel.children[i].οnclick=function(){
//鼠标点击li切换类名来改变样式
clsname=classname[this.index];
colorpanel.style.display="none";
}
}
//定义默认字体大小为10px
var WIDTH="10px";
var HEIGHT="10px";
//通过滑动range来改变字体大小
ram.οnmοusemοve=function(){
WIDTH=HEIGHT=ram.value+"px";
ramnum.innerHTML="字体大小:"+WIDTH;
}
//鼠标点击屏幕，通过滑动鼠标不停创建div属性节点，并且给它设置样式
document.οnmοusedοwn=function(){
  document.οnmοusemοve=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.οnmοuseup=function(){
document.οnmοusemοve=null;
}
//当橡皮差按钮被点击，遍历所有div并且把它们一一从父节点里面移除
eraser.οnclick=function(){
var oDiv=oBody.getElementsByTagName("div");
for(var i=0;i<oDiv.length;i++){
oBody.removeChild(oDiv[i]);
}
}
//以下为取消按钮的冒泡事件，因为我们点击按钮是不能绘制div的
eraser.οnmοusedοwn=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
colorbtn.οnmοusedοwn=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
colorpanel.οnmοusedοwn=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
ram.οnmοusedοwn=function(event){
var ievent=event||window.event;
ievent.cancelBubble=true;
}
}

}

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

javascript开发简易画板相关推荐

JavaScript +canvas简易画板的实现
本篇文章讲的是利用的canvas的一些属性制作一个简易的画板,由于本人的时间不足,以及能力也有限,所以功能比较简单,喜欢自己学习的同学有兴趣话可以自己加上一些功能.直接上代码了. <!DOCTY ...
JavaScript开发简易音乐播放器
使用h5开发的歌词联动音乐播放器,html部分代码如下: <div id="box"><img src="images/1.gif" widt ...
JavaScript 简易画板
html 5 canvas只是一个容器,想要画出东西全部依赖于JavaScript.感觉什么都离不开这个JavaScript脚本. 简易画板核心代码: <script>var start ...
Javascript开发的金山打字简易小游戏
记得以前读书的时候,由于课前都预习过了,所以听课一般都是为了给老师面子很"耐心"的坐在教室里,发着呆走着神.突然,那天上课讲了几天前预习的课题,采用JS可以识别键盘输入,嘿嘿,好玩 ...
Vue框架入门(一)---开发简易计算器
涉及知识: HTML.CSS.JavaScript Vue(v-for.v-model.v-on.v-clock) Gitee仓库 :https://gitee.com/vgtime123/Calcu ...
java awt 简单计算器,JAVA Swing 开发简易计算器（上）
开发一个简易的计算器我们主要分为两大部分:图形界面设计与具体功能实现.这篇文章讲图形界面设计,下篇讲具体功能实现. 代码下载:https://github.com/taifus/Java_Calcul ...
java 2d划线刷子_简易画板的JAVA实现
要实现一个画图板,首先我们要掌握的是图形界面开发和事件监听机制.在Java中,图形界面开发有三套组件: 1.AWT组件:这是JDK1.0推出的图形组件类,位于java.awt这个包下.AWT组件被称为 ...
java画板铅笔_简易画板的JAVA实现
要实现一个画图板,首先我们要掌握的是图形界面开发和事件监听机制.在Java中,图形界面开发有三套组件: 1.AWT组件:这是JDK1.0推出的图形组件类,位于java.awt这个包下.AWT组件被称为 ...
面向JavaScript开发人员的Adobe AIR与Dreamweaver
入门教程,非常详细,CS4里面应该可以省略前面几步直接开发了. Adobe AIR对于HTML/JavaScript应用程序与桌面的集成有着出色的支持,但除了所有附加功能之外,还需要一些其他工具和技术 ...

javascript开发简易画板

javascript开发简易画板相关推荐

最新文章

热门文章