Before we start, we need to know how canvas draws images. The canvas element is used to draw graphics on web pages. The HTML5 canvas element uses JavaScript to draw 2D images on the web page. On the canvas of the rectangular area, control each pixel, and use JavaScript to draw 2D graphics and render them pixel by pixel. There are many ways to use the canvas element to draw paths, rectangles, circles, characters, and add images.
* Notice! ! ! The canvas tag itself does not have the drawing function and can only use JavaScript to draw images on the web page.
The rendering is as follows:
1. Initialize js code
//Initialization(function(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext('2d' ); drawPolygon(mCtx); // Draw polygon edges drawLines(mCtx); //Vertex lines drawText(mCtx); // Draw text drawRegion(mCtx); // Draw data drawCircle(mCtx); // Draw data dots})();In the above code, all settings are initialized through an immediate execution function. For how to draw a regular hexagon on canvas, please refer to Drawing a Regular Hexagon on Canvas
In the spider diagram, we can split it up and draw hexagons, straight lines, and circles into complete individual components, and then call and draw them uniformly through methods.
The source code is shown below:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Spider chart canvas</title> <style type=text/css> canvas{ } </style></head ><body><script type=text/javascript> var mW = 400; var mH = 400; var mData = [['Mana', 77],['Defense', 72],['Health', 46],['Physical damage', 50],['Recovery value', 80],['Endurance', 60]]; var mCount = mData.length; //Number of edges var mCenter = mW /2; //Center point var mRadius = mCenter - 100; //Radius (the subtracted value is used to leave space for the drawn text) var mAngle = Math.PI * 2 / mCount; //Angle var mCtx = null; var mColorPolygon = '#B8B8B8'; //Polygon color var mColorLines = '#B8B8B8'; //Vertex connection color var mColorText = '#000000'; //Initialization(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); }) (); // Draw polygon edges function drawPolygon(ctx){ ctx.save(); // save the default state ctx.strokeStyle = mColorPolygon; var r = mRadius/ mCount; //Unit radius//Draw 6 circles for(var i = 0; i < mCount; i ++) { ctx.beginPath(); //Start path var currR = r * ( i + 1); //Current radius //Draw 6 edges 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(); //Closed path ctx.stroke(); } ctx.restore(); // restore to the default state } //Vertex connection 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(); } //Draw text 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(); } //Draw data region 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(); } //Draw point function drawCircle(ctx){ ctx.save(); var r = mCenter / 18; 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>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.