Canvas实现PC画板
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Canvas实现PC画板</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
body {
background-size: cover;
background-attachment: fixed;
}
.container {
margin: 30px;
}
#cavs {
border: 2px solid indianred;
border-radius: 10px;
box-shadow: 10px 10px 5px #999999;
margin-bottom: 20px;
}
.container ul {
width: 700px;
text-align: center;
}
.container ul li {
display: inline-block;
margin-left: 35px;
}
.container ul li input {
background-color: yellow;
color: black;
border: none;
padding: 6px 15px;
font-size: 16px;
border-radius: 25px;
cursor: pointer;
transition-duration: 0.2s;
}
.container ul li input:hover {
border: 1px solid #aaaa;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body>
<div class="container">
<canvas id="cavs" width="700" height="333"></canvas>
<ul id='btn_container'>
<li><input type="color" id="colorChange"></li>
<li><input type="button" id="clear" value="清屏"></li>
<li><input type="button" id="eraser" value="橡皮"></li>
<li><input type="button" id="revoke" value="撤销"></li>
<li><input type="range" id="lineRuler"></li>
<li><span id="showRange"></span></li>
</ul>
</div>
</body>
</html>
<script>
/*
* drawing board lei.xue
* 开发方式三种
* 单对象
* 立即执行函数
* let
*/
var drawingBoard = {
cavs: document.getElementById("cavs"),
ctx: document.getElementById("cavs").getContext('2d'),
btn_container: document.getElementById('btn_container'),
colorChange: document.getElementById("colorChange"),
lineRuler: document.getElementById("lineRuler"),
showRange: document.getElementById("showRange"),
arrImageDate: [],
bool: false,
clearFlag:false,
init: function () {
this.ctx.lineCap = "round";//线条的头尾样式
this.ctx.lineJoin = "round";//线条平滑样式
this.drawing();
this.btnsAllFn();
},
btnsAllFn: function () {
var self = this;
self.btn_container.onclick = function (e) {
switch (e.target.id) {
case 'clear':
if(!self.clearFlag){
self.arrImageDate.push(self.ctx.getImageData(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight));
self.clearFlag = true;
}
self.ctx.clearRect(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight);
break;
case 'eraser':
//画背景色
self.ctx.strokeStyle = "#ffffff";
break;
case 'revoke':
//每次抬起鼠标是 把当前画板内容保存起来,撤销就是恢复最后一张图片数据
console.log(self.arrImageDate);
if (self.arrImageDate.length > 0) {
var img = self.arrImageDate.pop();
self.ctx.putImageData(img, 0, 0);
}
break;
}
}
this.colorChange.onchange = function () {
self.ctx.strokeStyle = this.value;
}
this.lineRuler.onchange = function(){
self.showRange.innerText = 1 + Math.floor(self.lineRuler.value / 5);
}
},
drawing: function () {
var self = this;
var c_left = cavs.offsetLeft;
var c_top = cavs.offsetTop;
self.showRange.innerText = 1 + Math.floor(self.lineRuler.value / 5);
self.cavs.onmousedown = function (e) {
self.ctx.lineWidth = 1 + Math.floor(self.lineRuler.value / 5);
self.arrImageDate.push(self.ctx.getImageData(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight));
self.bool = true;
self.clearflag = false;
self.ctx.beginPath();
self.ctx.moveTo(e.pageX - c_left, e.pageY - c_top);
}
self.cavs.onmousemove = function (e) {
if (self.bool) {
self.ctx.lineTo(e.pageX - c_left, e.pageY - c_top);
self.ctx.stroke();
}
}
self.cavs.onmouseup = cavsEnd;
self.cavs.onmouseleave = cavsEnd;
function cavsEnd(e) {
if (self.bool) {
self.bool = false;
self.ctx.closePath();
}
}
}
}
drawingBoard.init();
</script>
