在開始之前,我們需要知道canvas是如何進行圖像的繪製,canvas 元素用於在網頁上繪製圖形。 HTML5 的canvas 元素使用JavaScript 在網頁上繪製2D圖像。 在矩形區域的畫布上，控制其每一像素，JavaScript 來繪製2D圖形，並逐像素渲染。可以透過多種方法使用canvas 元素繪製路徑、矩形、圓形、字元以及添加圖像。
* 注意！ ！ ！ canvas 標籤本身是不具備繪圖功能，只能使用JavaScript 在網頁上繪製圖片。
效果圖如下所示:
1. 初始化js程式碼
//初始化(function(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext('2d' ); drawPolygon(mCtx); // 繪製多邊形邊drawLines(mCtx); //頂點連線drawText(mCtx); // 繪製文字drawRegion(mCtx); // 繪製資料drawCircle(mCtx); // 畫資料圓點})();上面程式碼中,透過一個立即執行函數,進行對所有的設定進行初始化,對於canvas正六邊形的畫法,可參見canvas畫正六邊形
在蜘蛛圖中,我們可以進行拆分一下,通過畫六邊形,直線,圓圈的方式,分別進行完整個體的組件,然後通過方法進行統一調用繪製
如下面所示原始碼:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>蜘蛛圖canvas</title> <style type=text/css> canvas{ } </style></head ><body><script type=text/javascript> var mW = 400; var mH = 400; var mData = [['法力', 77],['防禦', 72],['生命值', 46],['物理傷害', 50],['回復值', 80],['耐力', 60]]; var mCount = mData.length; //邊數var mCenter = mW /2; //中心點var mRadius = mCenter - 100; //半徑(減去的值用於給繪製的文字留空間) var mAngle = Math.PI * 2 / mCount; //角度var mCtx = null; var mColorPolygon = '#B8B8B8'; //多邊形顏色var mColorLines = '#B8B8B8'; //頂點連線顏色var mColorText = '# 000000'; //初始化(function(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext('2d'); drawPolygon(mCtx); drawLines(mtextx); ; drawText(mCtx); drawRegion(mCtx); drawCircle(mCtx); })(); // 繪製多邊形邊function drawPolygon(ctx){ ctx.save(); // save the default state ctx.strokeStyle = mColorPolygon; var r = mRadius/ mCount; // 單位半徑//畫6個圈for(var i = 0; i < mCount; i ++){ ctx.beginPath(); //開始路徑var currR = r * ( i + 1); //目前半徑//畫6條邊for(var j = 0; j < mCount; j ++) { var x = mCenter + currR * Math.cos(mAngle * j); var y = mCenter + currR * Math.sin(mAngle * j); console.log('x:' + x, 'y:' + y); ctx.lineTo(x, y); } ctx.closePath(); //閉合路徑ctx.stroke(); } ctx.restore(); // restore to the default state } //頂點連線function drawLines(ctx){ ctx.save(); ctx.beginPath(); ctx.strokeStyle = mColorLines; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i); var y = mCenter + mRadius * Math.sin(mAngle * i); ctx.moveTo(mCenter, mCenter); ctx.lineTo(x, y); } ctx.stroke(); ctx.restore(); } //繪製文字function drawText(ctx){ ctx.save(); var fontSize = mCenter / 12; ctx.font = fontSize + 'px Microsoft Yahei'; ctx.fillStyle = mColorText; for(var i = 0; i < mCount; i ++ ){ var x = mCenter + mRadius * Math.cos(mAngle * i); var y = mCenter + mRadius * Math.sin(mAngle * i); if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){ ctx.fillText(mData[i][0], x, y + fontSize) ; }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){ ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize); }else if(mAngle * i > Math.PI && mAngle * i < = Math.PI * 3 / 2){ ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y); }else{ ctx.fillText(mData[i][0], x, y); } } ctx.restore(); } //繪製資料區域function drawRegion(ctx){ ctx.save(); ctx.beginPath(); for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i] [1] / 100; ctx.lineTo(x, y); } ctx.closePath(); ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; ctx.fill(); ctx.restore(); } //畫點function drawCircle(ctx){ ctx.save(); var r = mCenter / 18; for for (var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.beginPath(); ctx.arc(x , y, r, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'; ctx.fill(); } ctx.restore(); }</script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。