始める前に、canvas がどのように画像を描画するのかを理解する必要があります。canvas 要素は、Web ページ上にグラフィックを描画するために使用されます。 HTML5 の Canvas 要素は、JavaScript を使用して Web ページ上に 2D 画像を描画します。 長方形領域のキャンバス上で、各ピクセルを制御し、JavaScript を使用して 2D グラフィックを描画し、ピクセルごとにレンダリングします。 Canvas 要素を使用してパス、長方形、円、文字を描画したり、画像を追加したりする方法は数多くあります。
* 知らせ！ ！ ！ Canvas タグ自体には描画機能はなく、JavaScript を使用して Web ページ上に画像を描画することしかできません。
レンダリングは次のとおりです。
1. jsコードを初期化する
//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); //テキストの描画drawRegion(mCtx); // データの描画drawCircle(mCtx) // データのドットの描画})();上記のコードでは、即時実行関数によりすべての設定が初期化されています。キャンバス上に正六角形を描画する方法については、「キャンバス上に正六角形を描画する」を参照してください。
スパイダー ダイアグラムでは、六角形、直線、円を完全な個別のコンポーネントに分割して描画し、メソッドを通じてそれらを呼び出して均一に描画することができます。
ソースコードを以下に示します。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <title>スパイダー チャート キャンバス</title> <style type=text/css> キャンバス{ } </style></head ><body><script type=text/javascript> var mW = 400 var mH = 400; var mData = [['マナ', 77],['防御', 72],['体力', 46],['物理ダメージ', 50],['回復値', 80],['耐久力', 60]]; //エッジの数var mCenter = mW /2; //中心点 var mRadius = mCenter - 100; //半径 (減算された値は描画テキスト用のスペースを残すために使用されます) var mAngle = Math.PI * 2 / mCount; //角度 var mCtx = null; var mColorPolygon = '#B8B8B8' // 頂点接続の色 var mColorText = '#000000'; { var Canvas = document.createElement('canvas'); document.body.appendChild(canvas);キャンバスの高さ = mH; mCtx = 描画ポリゴン(mCtx); (); // ポリゴンのエッジを描画します。 functiondrawPolygon(ctx){ ctx.save(); // デフォルトの状態を保存 ctx.ストロークスタイル = mColorPolygon; //単位半径//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); :' + y); ctx.lineTo(x, y); ctx.closePath(); ctx.restore(); // デフォルト状態に戻す } // 頂点接続関数drawLines(ctx){ ctx.beginPath(); < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i); mRadius * Math.sin(mAngle * i); ctx.moveTo(mCenter, mCenter) } ctx.ストローク(); } // テキストを描画します。 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); 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(); } //データ領域の描画関数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(); } //描画ポイント関数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; 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>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。