【底部附有制作繪圖板完整代碼】
編碼過程中會遇到一些原生js的技術，小編會先羅列出來。

1、在for循環中為多個元素利用索引值綁定事件，會產生異步問題。

問題所在：在事件代碼內部可以進行各種操作，就是不能引用循環變量。

兩種解決方案解決方案：

利用一個自執行函數包裹住循環體，并將循環變量作為參數傳遞進去。

//為每一個顏色設置單擊事件，并讓所有的顏色具備.currentColor類 //自執行函數：語法(function(形參){})(實參)； //不一定非要拿小括號包裹起來，也可以在函數前面加單目運算，如：+、-、！、~等都可以for(var i=0; i<$$('.color').length; i++){~function(index){$$('.color')[index].addEventListener('click',function(event){for(var j=0; j<$$('.color').length; j++){$$('.color')[j].classList.remove('currentColor');}$$('.color')[index].classList.add('currentColor')})}(i) }

利用let定義循環變量i，這樣在每一次循環中循環變量i都是一個獨立的變量。

2、如何利用Jaavascript模擬元素的拖拽

let isDown = false; let ctx = canvas.getContext('2d'); canvas.addEventListener('mousedown',function(event){isDown = true; }) canvas.addEventListener('mouseup',function(){isDown = false; }) canvas.addEventListener('mousemove',function(event){if(isDown){//鼠標按下的同時進行了移動：繪制圖形}else{//鼠標彈起的同時進行了移動：沒有操作} })

3、ctx.beginPath()；

每次繪制一個新圖形，都要先執行這個方法。告訴畫布下面的操作是一個新圖形的繪制工作，和現在畫布上已有的圖形無關。

4、將Canvas畫布轉換為圖片

利用blob地址將畫布轉換為圖片。

canvas.toBlob(function(blob){console.log(blob) //blob - Canvas畫布轉換的File對象 },MIME類型,quality) //參數：quality - 轉換為圖片的最終質量，取值為0-1。

利用base64地址將畫布轉換為圖片。

var base64URL=canvas.toDataURL(MIME類型,quality)

繪圖板完整代碼：

<div class="controlPanel"><div>畫筆粗細：<select class="ctxWidth"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option></select></div><div class="ctxColor">畫筆顏色：</div><div><button class="clearCanvas">清除畫布</button></div><div><button class="saveImage">保存圖片</button></div> </div> <canvas class="myCanvas"></canvas> .controlPanel{width: 1000px;height: 60px;margin: 20px auto;border: 1px solid #3385ff;box-sizing: border-box;padding: 16px;display: flex;align-items: center; } .ctxWidth{width: 50px; } .ctxColor{margin: auto 40px;display: flex; } .ctxColor .color{width: 20px;height: 20px;margin: 0 3px;border: 2px solid transparent; } .ctxColor .currentColor{border: 2px solid rgba(0,0,0,0.6); } button{margin-left: 20px; } .myCanvas{border: 1px solid #3385ff;display: block;margin: auto; } //封裝利用選擇器來進行DOM對象的獲取 function $(selector){return document.querySelector(selector); }function $$(selectors){return document.querySelectorAll(selectors); }let canvas = $(".myCanvas"); canvas.width = 1000; canvas.height = 500;let ctx = canvas.getContext('2d');//canvas畫布默認生成的圖片是png格式， //繪制一個白色矩形占滿整個畫布 ctx.beginPath(); ctx.rect(0,0,canvas.width,canvas.height); ctx.fillStyle = '#ffffff'; ctx.fill(); let colorList = ['#363636','#e1565b','#3385ff','#d8ad7a','#14d8a2','#cc14d8']; for(var i=0;i<colorList.length;i++){var colorNode = document.createElement('div');colorNode.className = 'color';colorNode.style.backgroundColor = colorList[i]; //設置畫筆的顏色$(".ctxColor").appendChild(colorNode); }//為每一個顏色設置單擊事件，并讓所有的顏色具備.currentColor類 for(let i=0; i<$$('.color').length; i++){$$('.color')[i].addEventListener('click',function(event){for(var j=0; j<$$('.color').length; j++){$$('.color')[j].classList.remove('currentColor');}$$('.color')[i].classList.add('currentColor');ctx.strokeStyle = colorList[i];}) }//利用avaScript模擬元素的拖拽 let isDown = false; canvas.addEventListener('mousedown',function(event){isDown = true;ctx.beginPath();ctx.moveTo(event.offsetX,event.ofsetY) }) canvas.addEventListener('mouseup',function(){isDown = false; }) canvas.addEventListener('mousemove',function(event){if(isDown){ //鼠標按下的同時進行了移動：繪制圖形ctx.lineTo(event.offsetX,event.offsetY);ctx.stroke();}else{ //鼠標彈起的同時進行了移動：沒有操作} })//設置畫筆的粗細 $('.ctxWidth').addEventListener('change',function(){ctx.lineWidth = this.value; })//清除畫布 $('.clearCanvas').addEventListener('click',function(){ctx.clearRect(0,0,canvas.width,canvas.height) })//保存圖片 //注意：要將canvas轉換為jpg格式的圖片，需要在畫布上覆蓋一個白色的矩形。 $('.saveImage').addEventListener('click',function(){//方法一：利用blob地址將畫布轉換為圖片// canvas.toBlob(function(blob){// let url = window.URL.createObjectURL(blob);// let aNode = document.createElement('a');// aNode.href = url;// aNode.download = '';// aNode.click();// },"image/jpeg",1);//方法二：利用base64地址將畫布轉換為圖片。let base64Url = canvas.toDataURL("image/jpeg",1);let aNode = document.createElement('a');aNode.href = base64Url;aNode.download = '';aNode.click(); })

總結

以上是生活随笔為你收集整理的利用canvas开发一个绘图板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。