JS实现canvas简单小画板功能

时间：2021-05-26

本文实例为大家分享了JS实现canvas简单小画板的具体代码，供大家参考，具体内容如下

Html部分：

<!DOCTYPE html><html lang="en"><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"> <link rel="stylesheet" href="./index.css" rel="external nofollow" > <title>Document</title></head><body> <div class="container"> <canvas id="cavs" width="700" height="330"></canvas> <ul> <li> <input type="color" id="color"> </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="button" id="save" value=保存></li> <li><input type="range" id="lineRuler" min="1" max="20"> </li> </ul> </div> <script src="./index.js"></script></body></html>

CSS部分：

*{ margin: 0; padding: 0; list-style: none;}.container{ margin: 30px;}#cavs{ border: 1px solid red; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); border-radius: 10px;}.container ul{ margin-top: 20px; width: 700px; text-align: center;}.container ul li{ display: inline-block; margin-left: 35px;}.container ul li input{ padding: 6px 15px; border-radius: 10px; border: none; outline: none; cursor: pointer; transition: box-shadow 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);}.container ul li input:hover{ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);}

JS部分：

var drawingBoard = { cavs: document.getElementById('cavs'), ctx: document.getElementById('cavs').getContext('2d'), ul_node: document.getElementsByTagName('ul')[0], colorBoard: document.getElementById('color'), lineRuler: document.getElementById('lineRuler'), imgArr: [],//存放图片 init: function () { this.ctx.lineCap = 'round'; this.ctx.lineJoin = 'round'; this.drawing();//开始画画 this.btnsFnAll(); }, drawing: function () { var self = this; var left = this.cavs.offsetLeft; this.cavs.onmousedown = function (e) { var e_x = e.pageX;//鼠标在画布上的x点 var e_y = e.pageY; self.ctx.beginPath();//开始绘制 self.ctx.moveTo(e_x - left, e_y - left);//落笔点，开始点 var imgData = self.ctx.getImageData(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight); self.imgArr.push(imgData) document.onmousemove = function (e) { self.ctx.lineTo(e.pageX - left, e.pageY - left);//落笔点，开始点 self.ctx.stroke(); } document.onmouseup = function () { document.onmousemove = null; self.ctx.closePath();//闭合当前的路径 结束绘制 } this.onpointerleave = function () { document.onmousemove = null; } } }, btnsFnAll: function () { var self = this; this.ul_node.addEventListener('click', function (e) { console.log(e.target.id); switch (e.target.id) { case 'cleanBoard'://清屏 self.ctx.clearRect(0, 0, self.cavs.offsetWidth, self.cavs.offsetHeight) break; case 'eraser'://橡皮 self.ctx.strokeStyle = "#ffffff"; break; case 'save'://保存 let url = self.cavs.toDataURL('image/jpg'); let a = document.createElement('a'); document.body.appendChild(a); a.href = url; a.download = '草稿纸'; a.target = '_blank'; a.click() break; case 'rescind'://撤销 console.log(self.imgArr) if (self.imgArr.length > 0) { self.ctx.putImageData(self.imgArr.pop(), 0, 0) } break; } }); this.colorBoard.onchange = function () { self.ctx.strokeStyle = this.value; }; this.lineRuler.onchange = function () { self.ctx.lineWidth = this.value } }}drawingBoard.init();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章