【底部附有制作繪圖板完整代碼】
編碼過(guò)程中會(huì)遇到一些原生js的技術(shù)，小編會(huì)先羅列出來(lái)。

1、在for循環(huán)中為多個(gè)元素利用索引值綁定事件，會(huì)產(chǎn)生異步問(wèn)題。

問(wèn)題所在：在事件代碼內(nèi)部可以進(jìn)行各種操作，就是不能引用循環(huán)變量。

兩種解決方案解決方案：

利用一個(gè)自執(zhí)行函數(shù)包裹住循環(huán)體，并將循環(huán)變量作為參數(shù)傳遞進(jìn)去。

//為每一個(gè)顏色設(shè)置單擊事件，并讓所有的顏色具備.currentColor類(lèi) //自執(zhí)行函數(shù)：語(yǔ)法(function(形參){})(實(shí)參)； //不一定非要拿小括號(hào)包裹起來(lái)，也可以在函數(shù)前面加單目運(yùn)算，如：+、-、！、~等都可以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定義循環(huán)變量i，這樣在每一次循環(huán)中循環(huán)變量i都是一個(gè)獨(dú)立的變量。

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){//鼠標(biāo)按下的同時(shí)進(jìn)行了移動(dòng)：繪制圖形}else{//鼠標(biāo)彈起的同時(shí)進(jìn)行了移動(dòng)：沒(méi)有操作} })

3、ctx.beginPath()；

每次繪制一個(gè)新圖形，都要先執(zhí)行這個(gè)方法。告訴畫(huà)布下面的操作是一個(gè)新圖形的繪制工作，和現(xiàn)在畫(huà)布上已有的圖形無(wú)關(guān)。

4、將Canvas畫(huà)布轉(zhuǎn)換為圖片

利用blob地址將畫(huà)布轉(zhuǎn)換為圖片。

canvas.toBlob(function(blob){console.log(blob) //blob - Canvas畫(huà)布轉(zhuǎn)換的File對(duì)象 },MIME類(lèi)型,quality) //參數(shù)：quality - 轉(zhuǎn)換為圖片的最終質(zhì)量，取值為0-1。

利用base64地址將畫(huà)布轉(zhuǎn)換為圖片。

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

繪圖板完整代碼：

<div class="controlPanel"><div>畫(huà)筆粗細(xì)：<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">畫(huà)筆顏色：</div><div><button class="clearCanvas">清除畫(huà)布</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; } //封裝利用選擇器來(lái)進(jìn)行DOM對(duì)象的獲取 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畫(huà)布默認(rèn)生成的圖片是png格式， //繪制一個(gè)白色矩形占滿整個(gè)畫(huà)布 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]; //設(shè)置畫(huà)筆的顏色$(".ctxColor").appendChild(colorNode); }//為每一個(gè)顏色設(shè)置單擊事件，并讓所有的顏色具備.currentColor類(lèi) 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){ //鼠標(biāo)按下的同時(shí)進(jìn)行了移動(dòng)：繪制圖形ctx.lineTo(event.offsetX,event.offsetY);ctx.stroke();}else{ //鼠標(biāo)彈起的同時(shí)進(jìn)行了移動(dòng)：沒(méi)有操作} })//設(shè)置畫(huà)筆的粗細(xì) $('.ctxWidth').addEventListener('change',function(){ctx.lineWidth = this.value; })//清除畫(huà)布 $('.clearCanvas').addEventListener('click',function(){ctx.clearRect(0,0,canvas.width,canvas.height) })//保存圖片 //注意：要將canvas轉(zhuǎn)換為jpg格式的圖片，需要在畫(huà)布上覆蓋一個(gè)白色的矩形。 $('.saveImage').addEventListener('click',function(){//方法一：利用blob地址將畫(huà)布轉(zhuǎn)換為圖片// 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地址將畫(huà)布轉(zhuǎn)換為圖片。let base64Url = canvas.toDataURL("image/jpeg",1);let aNode = document.createElement('a');aNode.href = base64Url;aNode.download = '';aNode.click(); })

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。