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.piao2010.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.piao2010.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;//鼠標(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. .net中string類型可以作為lock的鎖對(duì)象嗎2. 詳細(xì)總結(jié)Java for循環(huán)的那些坑3. Java進(jìn)行Appium自動(dòng)化測試的實(shí)現(xiàn)4. python 使用Tensorflow訓(xùn)練BP神經(jīng)網(wǎng)絡(luò)實(shí)現(xiàn)鳶尾花分類5. 新手學(xué)python應(yīng)該下哪個(gè)版本6. php中PHPUnit框架實(shí)例用法7. uni-app結(jié)合PHP實(shí)現(xiàn)單用戶登陸demo及解析8. ajax實(shí)現(xiàn)頁面的局部加載9. 如何利用Python matplotlib繪制雷達(dá)圖10. PHP安全-過濾輸入
網(wǎng)公網(wǎng)安備