Javascript 实现简单画板
# Javascript 实现简单画板
# 实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body,
html {
background: #000;
height: 100%;
}
.wrapper {
padding: 10px;
height: 100%;
box-sizing: border-box;
}
.wrapper canvas {
width: 100%;
height: calc(100% - 65px);
border: 1px solid blue;
border-radius: 25px;
box-shadow: 10px 10px 5px brown;
margin-bottom: 16px;
background-color: #fff;
}
.wrapper .btn-list {
width: 100%;
text-align: center;
}
.wrapper .btn-list li {
display: inline-block;
margin-left: 40px;
}
.wrapper .btn-list li input {
background-color: darkgreen;
color: blanchedalmond;
border: none;
padding: 6px 13px;
cursor: pointer;
border-radius: 25px;
font-size: 18px;
display: block;
transition-duration: 0.2s;
outline: none;
border: 1px solid transparent;
}
.wrapper .btn-list li input:hover {
border: 1px solid chocolate;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<!-- div.wrapper>canvas+ul.btn-list>li*5>input -->
<div class="wrapper">
<canvas class="cavs"></canvas>
<ul class="btn-list">
<li><input type="color" id="colorBoard" value="colorBoard" /></li>
<li><input type="button" id="draw" value="画笔" /></li>
<li><input type="button" id="cleanBoard" value="清屏" /></li>
<li><input type="button" id="eraser" value="橡皮" /></li>
<li><input type="button" id="rescind" value="撤销" /></li>
<li><input type="range" id="lineRuler" value="线条" min="1" max="30" /></li>
</ul>
</div>
</body>
<!-- 引入 jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>
// 初始化 canvas 宽高
function init() {
const wid = $('.wrapper')
.eq(0)
.width()
const hei = $('.wrapper')
.eq(0)
.height()
$('.cavs')
.eq(0)
.attr('width', wid)
$('.cavs')
.eq(0)
.attr('height', hei - 65)
}
window.onload = init
window.onresize = init
var drawingBoardObj = {
cavs: $('.cavs'),
context: $('.cavs')
.get(0)
.getContext('2d'),
colorBoard: $('#colorBoard'),
cleanBoard: $('#cleanBoard'),
arrImg: [],
draw: $('#draw'),
eraser: $('#eraser'),
rescind: $('#rescind'),
lineRuler: $('#lineRuler'),
bool: false,
init: function() {
this.context.lineCap = 'round' //线条起始与结尾样式
this.context.lineJoin = 'round' //转弯
this.draw() //画笔函数
this.btnFn() //按钮函数
},
draw: function() {
var cavs = this.cavs,
self = this
var c_x = cavs.offset().left, //canvas离左边的距离
c_y = cavs.offset().top //canvas离上边的距离
cavs.mousedown(function(e) {
e = e || window.event
self.bool = true
var m_x = e.pageX - c_x, //鼠标点距离减去canvas离左边的距离等于画布点
m_y = e.pageY - c_y //鼠标点距离减去canvas离上边的距离等于画布点
self.context.beginPath()
self.context.moveTo(m_x, m_y) //鼠标在画布上的点
var imgData = self.context.getImageData(0, 0, self.cavs[0].scrollWidth, self.cavs[0].scrollHeight)
self.arrImg.push(imgData)
//console.log(self.arrImg);
})
cavs.mousemove(function(e) {
if (self.bool) {
//定义一把锁，防止鼠标移开滑动
self.context.lineTo(e.pageX - c_x, e.pageY - c_y)
self.context.stroke() //绘制出路径
}
})
cavs.mouseup(function() {
self.context.closePath() //结束自动闭合
self.bool = false //鼠标不移动时画笔断开
})
cavs.mouseleave(function() {
self.context.closePath() //结束自动闭合
self.bool = false //鼠标不移动时画笔断开
})
},
btnFn: function() {
var self = this
$('.btn-list').on('click', function(e) {
e = e || window.event
console.log(e.target.id)
switch (
e.target.id //target
) {
case 'cleanBoard':
self.context.clearRect(0, 0, self.cavs[0].scrollWidth, self.cavs[0].scrollHeight) //[0]
break
case 'eraser':
// 橡皮擦 画笔颜色变成画板背景色（白色）
self.context.strokeStyle = '#fff'
break
case 'draw':
// 画笔 将画笔颜色变成当前设置的颜色
self.context.strokeStyle = $(self.colorBoard).val()
break
case 'rescind':
if (self.arrImg.length > 0) {
self.context.putImageData(self.arrImg.pop(), 0, 0)
break
}
}
})
this.colorBoard.change(function(e) {
//当颜色变化时改变字体的颜色
self.context.strokeStyle = $(this).val()
})
this.lineRuler.change(function(e) {
//线条的变化值
self.context.lineWidth = $(this).val()
})
},
}
drawingBoardObj.init()
</script>
</html>
# 界面
