JS實現(xiàn)canvas簡單小畫板功能
更新時間:2020年06月23日 16:16:42 作者:Jeslie-He
這篇文章主要為大家詳細介紹了JS實現(xiàn)canvas簡單小畫板功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(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="./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, 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();//閉合當前的路徑 結(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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
document.createElement("A")比較不錯的屬性
document.createElement("A")比較不錯的屬性...2007-08-08教你如何自定義百度分享插件以及bshare分享插件的分享按鈕
在項目中我們常用到百度分享插件或者bshare分享插件,雖然官方都有自定義按鈕的功能,但是畢竟還是只有少數(shù)幾種,我們?nèi)绾蝸碇谱饔凶约禾厣姆窒戆粹o呢?2014-06-06JavaScript使用canvas實現(xiàn)手寫簽名功能
最近遇到一個h5手寫簽名的需求,按理說這種功能網(wǎng)上隨便一搜一大把現(xiàn)成的源碼和組件,但是像這種比較經(jīng)典又很簡單的功能,還是要弄清楚到底怎么實現(xiàn)的,所以接下來本文就給大家介紹一下如何用canvas實現(xiàn)手寫簽名功能2023-08-08javascript適配器模式和組合模式原理與實現(xiàn)方法詳解
這篇文章主要介紹了javascript適配器模式和組合模式原理與實現(xiàn)方法,結(jié)合實例形式詳細分析了javascript適配器模式與組合模式相關(guān)原理、功能、實現(xiàn)方法與注意事項,需要的朋友可以參考下2023-07-07詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象(2)
這篇文章主要介紹了JavaScript基于面向?qū)ο笾畡?chuàng)建對象,詳細的分析面向?qū)ο蟮脑头绞揭约捌渌C合的方式,感興趣的小伙伴們可以參考一下2015-12-12微信小程序訂閱消息(java后端實現(xiàn))開發(fā)
這篇文章主要介紹了微信小程序訂閱消息(java后端實現(xiàn))開發(fā),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-06-06