JS實(shí)現(xiàn)canvas簡(jiǎn)單小畫板功能
本文實(shí)例為大家分享了JS實(shí)現(xiàn)canvas簡(jiǎn)單小畫板的具體代碼，供大家參考，具體內(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://m.4tl426be.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://m.4tl426be.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();
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹形下拉框的方法2. phpstudy apache開啟ssi使用詳解3. JSP之表單提交get和post的區(qū)別詳解及實(shí)例4. Xml簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理5. 詳解瀏覽器的緩存機(jī)制6. .Net Core和RabbitMQ限制循環(huán)消費(fèi)的方法7. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器8. jsp文件下載功能實(shí)現(xiàn)代碼9. ASP動(dòng)態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享10. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼
網(wǎng)公網(wǎng)安備