Bevor wir beginnen, müssen wir wissen, wie Canvas Bilder zeichnet. Das Canvas-Element wird zum Zeichnen von Grafiken auf Webseiten verwendet. Das HTML5-Canvas-Element verwendet JavaScript, um 2D-Bilder auf der Webseite zu zeichnen. Steuern Sie auf der Leinwand des rechteckigen Bereichs jedes Pixel und verwenden Sie JavaScript, um 2D-Grafiken zu zeichnen und sie Pixel für Pixel zu rendern. Es gibt viele Möglichkeiten, das Canvas-Element zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen zu verwenden und Bilder hinzuzufügen.
* Beachten! ! ! Das Canvas-Tag selbst verfügt nicht über die Zeichenfunktion und kann nur JavaScript zum Zeichnen von Bildern auf der Webseite verwenden.
Die Darstellung ist wie folgt:
1. Initialisieren Sie den 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); // Polygonkanten zeichnen drawLines(mCtx); Text zeichnen drawRegion(mCtx); // Daten zeichnen drawCircle(mCtx); // Datenpunkte zeichnen})();Im obigen Code werden alle Einstellungen durch eine Funktion zur sofortigen Ausführung initialisiert. Informationen zum Zeichnen eines regelmäßigen Sechsecks auf der Leinwand finden Sie unter Zeichnen eines regelmäßigen Sechsecks auf der Leinwand
Im Spinnendiagramm können wir es aufteilen und Sechsecke, gerade Linien und Kreise in vollständige Einzelkomponenten zeichnen und diese dann über Methoden aufrufen und einheitlich zeichnen.
Der Quellcode ist unten dargestellt:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Spinnendiagramm-Leinwand</title> <style type=text/css> Leinwand{ } </style></head ><body><script type=text/javascript> var mW = 400; var mH = 400; var mData = [['Mana', 77],['Defense', 72],['Gesundheit', 46],['Physischer Schaden', 50],['Erholungswert', 80],['Ausdauer', 60]]; var mCount = mData.length; //Anzahl der Kanten var mCenter = mW /2; //Mittelpunkt var mRadius = mCenter - 100; //Radius (der subtrahierte Wert wird verwendet, um Platz für den gezeichneten Text zu lassen) var mAngle = Math.PI * 2 / mCount; //Winkel var mCtx = null; var mColorPolygon = '#B8B8B8'; //Vertex-Verbindungsfarbe var mColorText = '#000000'; { var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; mCtx = canvas.getContext('2d'); drawText(mCtx); (); // Polygonkanten zeichnen function drawPolygon(ctx){ ctx.save(); // den Standardzustand speichern ctx.StrokeStyle = mColorPolygon; var r = mRadius/ mCount //Zeichne 6 Kreise for(var i = 0; i < mCount; i ++) { ctx.beginPath(); //Startpfad var currR = r * ( i + 1); //Aktueller Radius //Zeichne 6 Kanten for(var j = 0; j < mCount; j ++) { var x = mCenter + currR * Math.cos(mAngle * j); var y = mCenter + currR * Math.sin(mAngle * j); :' + y); ctx.lineTo(x, y); } ctx.closePath(); ctx.restore(); // Wiederherstellung des Standardzustands } // Vertex-Verbindungsfunktion drawLines(); ctx.saveStyle = mColorLines; < 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){ 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(); } //Zeichne Datenbereichsfunktion drawRegion(ctx){ ctx.save(); 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.fillStyle = 'rgba(255, 0, 0.5)'; ctx.restore(); } //Zeichne Punktfunktion drawCircle(ctx){ 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.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 0, 0.8)'; } ctx.restore(); </script></body></html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.