JS實現canvas簡單小畫板功能
本文實例為大家分享了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='http://www.b3g6.com/bcjs/index.css' rel='external nofollow' > <title>Document</title></head><body> <div class='container'> <canvas height='330'></canvas> <ul> <li> <input type='color' id='color'> </li> <li> <input type='button' value='清屏'></li> <li> <input type='button' value='橡皮'></li> <li> <input type='button' value=撤銷></li> <li> <input type='button' value=保存></li> <li><input type='range' min='1' max='20'> </li> </ul> </div> <script src='http://www.b3g6.com/bcjs/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();
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備