原生javript绘画板

Html

Css

鼠标左键点击开始绘画，再次点击停止绘画

li {
	width:4px;
	height:4px;
	box-sizing:border-box;
	display:inline-block;
}
#warp {
	width:400px;
	border:1px solid black;
}
ul {
	padding:0;
	margin:0;
}
.tsb {
	display:inline-block;
	padding:0;
	margin:0;
	position:relative;
	top:10px;
}
.tsb span {
	height:30px;
	width:30px;
	display:inline-block;
	margin:0;
}
.tsb span:nth-child(1) {
	background:rgba(255,0,255);
}
.tsb span:nth-child(2) {
	background:rgba(0,255,255);
}
.tsb span:nth-child(3) {
	background:rgba(255,255,0);
}
.tsb span:nth-child(4) {
	background:rgba(0,0,255);
}
.tsb span:nth-child(5) {
	background:rgba(0,255,0);
}
.tsb span:nth-child(6) {
	background:rgba(255,0,0);
}
.tsb span:nth-child(7) {
	background:rgba(0,0,0);
}

//初始化函数
 var init = (function() {
     var str = '',
         box = document.getElementById('box')
     return function() {
         for (var i = 0; i < 10000; i++) {
             str += '<li data-color = "0"></li>';
         }
         box.innerHTML = str
     }
 }())

//画布构造函数
 function Background() {

this.color = 'rgba(0,255,255,1)',
         this.xr = function() {
             var li = document.getElementsByTagName('li'),
                 len = li.length;
             for (var i = 0; i < len; i++) {
                 li[i].style.background = this.color;
             }
         },
         this.changeColor = function(color) {
             this.color = color;
         }
 }
 var back = new Background() //创建画布

//画笔构造函数
 function Pen() {
     this.color = 'rgba(0,0,0,1)', //画笔颜色
         this.height = 1,
         this.changeColor = function(color) {
             //修改画笔颜色的方法
             this.color = color;
         },
         this.changeHeight = function(height) {
             //修改画笔的粗细
             this.height = height;
         }
 }
 var pen = new Pen() //创建画笔

//绘画函数
 var write = (function() {
     var box = document.getElementById('box')
     var count = 1;
     return function() {
         box.onmousedown = function() {
             count++;
             if (count % 2 == 0) {
                 box.onmousemove = function(e) {
                     var event = e || window.event //鼠标对象
                     var target = event.target || event.srcElement;
                     //鼠标滑过li时颜色发生改变
                     target.style.background = pen.color;
                 }

} else if (!count % 2 == 0) {
                 box.onmousemove = null

}

}())
 write();

init();

//清除画板
 function colorClear() {
     var li = document.getElementsByTagName('li');
     var len = li.length;
     for (var i = 0; i < len; i++) {
         li[i].style.background = back.color
     }

}

//更改画布颜色
 var span1 = document.getElementsByClassName('span1');
 for (var i = 0; i < span1.length; i++) {
     span1[i].addEventListener('click', function() {
         var color = this.getAttribute('data-color')
         back.changeColor(color);
         back.xr() //渲染画布
     })
 }

//更改画笔颜色
 var span2 = document.getElementsByClassName('span2');
 for (var i = 0; i < span2.length; i++) {
     span2[i].addEventListener('click', function() {
         var color = this.getAttribute('data-color')
         pen.changeColor(color);

})
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生javript绘画板



代码描述：原生javript绘画板demo

更新时间：2020-03-13 01:11:03

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

??将军

相关代码

鼠标左键点击开始绘画，再次点击停止绘画

原生javript绘画板

最新