JS實現canvas簡單小畫板功能
阿新 • • 發佈:2020-06-24
本文例項為大家分享了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.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.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,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,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) } break; } }); this.colorBoard.onchange = function () { self.ctx.strokeStyle = this.value; }; this.lineRuler.onchange = function () { self.ctx.lineWidth = this.value } } } drawingBoard.init();
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。