JS實(shí)現(xiàn)canvas簡單小畫板功能
本文實(shí)例為大家分享了JS實(shí)現(xiàn)canvas簡單小畫板的具體代碼，供大家參考，具體內(nèi)容如下
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.aoyou183.cn/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.aoyou183.cn/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;//鼠標(biāo)在畫布上的x點(diǎn) var e_y = e.pageY; self.ctx.beginPath();//開始繪制 self.ctx.moveTo(e_x - left, e_y - left);//落筆點(diǎn)，開始點(diǎn) 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);//落筆點(diǎn)，開始點(diǎn)self.ctx.stroke(); } document.onmouseup = function () {document.onmousemove = null;self.ctx.closePath();//閉合當(dāng)前的路徑 結(jié)束繪制 } 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();
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Java基于redis和mysql實(shí)現(xiàn)簡單的秒殺(附demo)2. 利用FastReport傳遞圖片參數(shù)在報表上展示簽名信息的實(shí)現(xiàn)方法3. XHTML 1.0：標(biāo)記新的開端4. ASP.NET MVC視圖頁使用jQuery傳遞異步數(shù)據(jù)的幾種方式詳解5. java必懂的冷知識點(diǎn)之Base64加密與解密6. 詳解php如何合并身份證正反面圖片為一張圖片7. python字典通過值反查鍵的實(shí)現(xiàn)(簡潔寫法)8. AJAX實(shí)現(xiàn)省市縣三級聯(lián)動效果9. 在終端啟動Python時報錯的解決方案10. 如何基于Python和Flask編寫Prometheus監(jiān)控
網(wǎng)公網(wǎng)安備