Avant de commencer, nous devons savoir comment Canvas dessine des images. L'élément Canvas est utilisé pour dessiner des graphiques sur des pages Web. L'élément canevas HTML5 utilise JavaScript pour dessiner des images 2D sur la page Web. Sur le canevas de la zone rectangulaire, contrôlez chaque pixel et utilisez JavaScript pour dessiner des graphiques 2D et les restituer pixel par pixel. Il existe de nombreuses façons d'utiliser l'élément canvas pour dessiner des chemins, des rectangles, des cercles, des personnages et ajouter des images.
* Avis! ! ! La balise canvas elle-même n'a pas de fonction de dessin et ne peut utiliser que JavaScript pour dessiner des images sur la page Web.
Le rendu est le suivant :
1. Initialiser le code js
//Initialisation(function(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext('2d' ); drawPolygon(mCtx); // Dessiner les bords du polygone drawLines(mCtx); // Lignes de sommet drawText(mCtx); Dessiner du texte drawRegion(mCtx); // Dessiner des données drawCircle(mCtx); // Dessiner des points de données})();Dans le code ci-dessus, tous les paramètres sont initialisés via une fonction d'exécution immédiate. Pour savoir comment dessiner un hexagone régulier sur un canevas, veuillez vous référer à Dessiner un hexagone régulier sur un canevas.
Dans le diagramme en araignée, nous pouvons le diviser et dessiner des hexagones, des lignes droites et des cercles en composants individuels complets, puis les appeler et les dessiner uniformément grâce à des méthodes.
Le code source est présenté ci-dessous :
<!DOCTYPE html><html lang=fr><head> <meta charset=UTF-8> <title>Toile de graphique en araignée</title> <style type=text/css> canvas{ } </style></head ><body><script type=text/javascript> var mW = 400; var mH = 400; var mData = [['Mana', 77],['Défense', 72],['Santé', 46],['Dégâts physiques', 50],['Valeur de récupération', 80],['Endurance', 60]]; var mCenter = mW /2; //Point central var mRadius = mCenter - 100 //Radius (la valeur soustraite est utilisée pour laisser de l'espace pour le texte dessiné) var mAngle = Math.PI * 2 / mCount; //Angle var mCtx = null; var mColorPolygon = '#B8B8B8'; //Couleur du polygone var mColorLines = '#B8B8B8'; //Couleur de connexion du sommet var mColorText = '#000000'; { var canevas = document.createElement('canvas'); document.body.appendChild(canvas); toile.hauteur = mH; toile.largeur = mCtx = toile.getContext('2d'); drawPolygon(mCtx); drawText(mCtx); (); // Dessiner les bords du polygone, fonction drawPolygon(ctx){ ctx.save(); // enregistre l'état par défaut ctx.StrokeStyle = mColorPolygon; var r = mRadius/ mCount; // Rayon unitaire//Dessinez 6 cercles pour (var i = 0; i < mCount; i ++) { ctx.beginPath(); //Chemin de départ var currR = r * ( i + 1); //Rayon actuel //Dessinez 6 arêtes pour (var j = 0; j < mCount; j ++) { var x = mCentre + currR * Math.cos(mAngle * j); var y = mCentre + currR * Math.sin(mAngle * j); :' + y); ctx.lineTo(x, y); } ctx.closePath(); //Chemin fermé ctx.AVC(); ctx.restore(); // restaurer l'état par défaut } //Fonction de connexion de sommet drawLines(ctx){ ctx.save(); ctx.beginPath(); < mCount; i ++){ var x = mCentre + mRadius * Math.cos(mAngle * i); mRadius * Math.sin(mAngle * i); ctx.moveTo(mCenter, mCenter); ctx.lineTo(x, y } ctx.trave(); ctx.restore(); ctx){ ctx.save(); var fontSize = mCenter / 12; Microsoft Yahei'; ctx.fillStyle = mColorText; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i); .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(); } //Dessiner la fonction de région de données 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 = mCentre + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.lineTo(x, y); } ctx.closePath(); ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; ctx.restore(); } //Fonction de point de dessin drawCircle(ctx){ ctx.save(); / 18; pour(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'; </script></body></html>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.