HTML5 Canvas コンポーネントを使用して太極拳のパターンを描画するためのグラフィック コードの詳細

最初の実装アイデア:

実装原理は主に、HTML5 の Canvas コンポーネントが提供するパス関数を使用して円を描画することです。まず、

2 つの半円 (1 つは黒、もう 1 つは白) を描画して形成します。円の描画が完了したら、描いた黒と白の円の中にそれぞれ黒い

と白い円を描きます。半径は大きな黒と白の円のちょうど半分です。 最後に、描かれた 2 つの黒と白の円を、半径約 10 ピクセルの白と黒のドットでそれぞれ塗りつぶします。

2 番目のプログラムの効果は次のとおりです:

3 つの主要なプログラム分析:

半円を描画するプログラム。200、200 は中心点の描画を開始することを意味します。座標、3 番目のパラメータ 150 は描画を意味します

4 番目のパラメータは開始角度を表し、5 番目のパラメータは終了角度を表し、最後のパラメータは時計回りか反時計回りかを表します

白い半円は次のとおりです:

		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);
		ctx.closePath();
		ctx.fill();

黒い半円を描画する コードは次のとおりです:

		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);
		ctx.closePath();
		ctx.fill();

太極拳のパターンにテキストを追加するコードは、Canvas のグローバル透明度設定関数

を使用します。以下:

		// set transparency value  
		ctx.globalAlpha = 0.2;

テキストを描画するコードは次のとおりです:

		// Draw semi transparent text
		ctx.fillStyle = "#f00";
		ctx.font = "32pt Arial";
		ctx.fillText("Hello", 220, 200);
		ctx.fillText("Canvas", 100, 250);

プログラムの完全な JavaScript コードは次のとおりです:

	window.onload = function() {
		var cvs = document.getElementById("canvas-path");
		ctx = cvs.getContext("2d");

		// Create circle, radius = 150
		// start point(x, y), radius, start angle, end angle, boolean antiClockWise
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);
		ctx.closePath();
		ctx.fill();
		
		// draw sub circle
		// start point(x, y), radius, start angle, end angle, boolean antiClockWise
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 275, 75, 0, Math.PI*2, false); 
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 125, 75, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		
		// fill black and white point
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 275, 10, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 125, 10, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		
		// set transparency value  
		ctx.globalAlpha = 0.2;  
		  
		// Draw semi transparent text
		ctx.fillStyle = "#f00";
		ctx.font = "32pt Arial";
		ctx.fillText("Hello", 220, 200);
		ctx.fillText("Canvas", 100, 250);
		ctx.globalAlpha = 1.0; 
		ctx.shadowOffsetX = 2;  
		ctx.shadowOffsetY = 2;  
		ctx.shadowBlur = 2;  
		ctx.shadowColor = "rgba(0, 0, 0, 0.5)";  
		ctx.fillStyle = "#000";
		ctx.font = "20px Times New Roman";
		ctx.fillText("-created by gloomyfish", 100, 30);
	};

なぜ私の名前をイラストに追加する必要があるのですか?再版されたときのマークはありません！

上記は、HTML5 Canvas コンポーネントを使用して太極拳のパターンを描画するためのグラフィック コードの詳細です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。