用canvas畫布畫一個畫板
阿新 • • 發佈：2017-07-03
osi images 點擊下載 技術分享 sed asc rom range -s
前段時間，在對H5的回顧中突然對canvas有了感覺，閑來無事便對其進行了一些捯飭。這不，上周我還做了一個好玩的畫板呢，廢話不多說，直接上代碼(PS：翠花，上代碼~)：
HTML部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas 制作畫板</title> <style> h1{ text-align: center; margin: 0 auto; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .drawBox{ width: 830px; height: auto; margin: auto; background: #999; border-radius: 10px; } #myCanvas{ padding: 0; background: #fff; display: block; cursor: pointer; border-radius: 10px; border: 15px solid #999; } .btnBox{ color: #fff; } .btnBox>a{ color:#fff; width: 85px; line-height: 40px; text-align: center; text-decoration: none; display: inline-block; background: #666; border-radius: 10px; } .btnBox>a:first-child{ margin: 0 0 12px 15px; } .btnBox>a#toolBtn{ width: 50px; } .btnBox>input#color{ width: 22px; height: 25px; cursor: pointer; outline: none; border-radius: 50%; margin: auto 10px; } .btnBox>input#thick{ outline: none; width: 20px; padding: 3px; border-radius: 5px; } .btnBox>input#range{ outline: none; position: relative; top: 5px; } </style> </head> <body> <h1>Canvas 制作畫板</h1> <div class="drawBox"> <canvas id="myCanvas" width="800" height="600"> 對不起，您的瀏覽器不兼容canvas標簽！ </canvas> <div class="btnBox"> <a href="javascript:;" id="toolBtn" title="選擇橡皮">橡皮</a> <a href="javascript:;" id="clearBtn" title="清除畫板">清除畫板</a> <a href="javascript:;" id="downLoad" title="點擊下載">下載圖片</a> <input type="color" id="color" title="選擇畫筆顏色"/> <input type="text" id="thick" value="1" title="請輸入畫筆粗細值"/> 細 <input type="range" name="range" id="range" title="畫筆粗細調整" value="1" min="1" max="50"/> 粗 </div> </div> </body> </html>
HTML頁面準備就緒，Javascript部分：
document.onload=function(){ var can = document.getElementById(‘myCanvas‘), downBtn = document.getElementById(‘downLoad‘), clearBtn = document.getElementById(‘clearBtn‘), colorBtn = document.getElementById(‘color‘), rangeBtn = document.getElementById(‘range‘), toolBtn = document.getElementById(‘toolBtn‘), thick = document.getElementById(‘thick‘);// 獲取按鈕等元素 var ctx = can.getContext(‘2d‘);// 定義一個canvas畫布 colorBtn.addEventListener(‘change‘,function () { ctx.strokeStyle=this.value; });// 顏色改變 rangeBtn.addEventListener(‘change‘,function () { ctx.lineWidth=this.value; thick.value=this.value; });// 筆畫粗細(拖拽) thick.addEventListener(‘blur‘,function () { ctx.lineWidth=this.value; rangeBtn.value=this.value; });// 筆畫粗細(數值輸入) toolBtn.addEventListener(‘click‘,function () { if(this.text==‘橡皮‘){ this.text=‘畫筆‘; ctx.strokeStyle=‘#fff‘; ctx.lineWidth=20; }else{ this.text=‘橡皮‘; ctx.strokeStyle=‘#000‘; ctx.lineWidth=rangeBtn.value; } });// 橡皮與畫筆的一個轉換 // 開始繪制 can.addEventListener(‘mousedown‘,function (from) { // 繪制 var formX=from.clientX-can.offsetLeft-13, formY=from.clientY-can.offsetTop-13; ctx.beginPath(); ctx.moveTo(formX,formY); // 畫筆移動 function move(to) { var toX=to.clientX-can.offsetLeft-13, toY=to.clientY-can.offsetTop-13; ctx.lineTo(toX,toY); ctx.stroke(); }; can.addEventListener(‘mousemove‘,move); // 停止繪制 document.addEventListener(‘mouseup‘,function () { can.removeEventListener(‘mousemove‘,move,false); }); }); // 下載圖片按鈕 downBtn.addEventListener(‘click‘,function () { this.href=can.toDataURL(‘image/png‘); this.setAttribute(‘download‘,‘picture.png‘); }); // 清除畫板按鈕-畫布情況 clearBtn.addEventListener(‘click‘,function () { ctx.clearRect(0,0,can.width,can.height); }); }
在此，我對橡皮的處理可能不夠理想，因為如果下載的是透明的，那麽會看見橡皮的痕跡，在此我就不對此給出解決的辦法，歡迎大家積極探索吧。好的，這一切就緒後，再來一個效果圖：
一個基本畫板，有興趣的朋友可以再對細節進行處理以及一些功能的擴展~
用canvas畫布畫一個畫板