JavaScript での HTML キャンバスとページストレージテクノロジの使用に関する詳細な説明

1. JavaScriptはHTMLでキャンバスを使用する

1. キャンバス: ページ上のグラフィックを描くための特別な領域
2. グラフィックを描くプロセス
（１）キャンバスを作成する：HTML5のキャンバスタグを使用する

<キャンバス id="id" width="幅" height="高さ">
</キャンバス>

（２）JavaScriptでキャンバスを取得する

ドキュメントの要素IDを取得します。

（３）ブラシの準備：描画環境とも呼ばれるコンテキストオブジェクト（ブラシ）は、キャンバス上にグラフィックを描くために使用されます。

 getContext('2d')

3. 描画
（１）線を引く：
A. 初期位置、線の終点（終点）、ストローク（線描画）
B. 2D 平面座標系: キャンバスの左上隅が座標原点 (0,0) です。原点から右に延長すると x 軸が増加し、下に延長すると y 軸が増加します。
C. 線画工程：
a. 初期位置（開始点）を決定する: moveTo(x,y)
b. 接続エンドポイント（終点）を決定する: lineTo(x,y)
c. ストローク:stroke()
D. 線のスタイル
a. 線の幅: lineWidth = 'value'、デフォルトの単位はピクセルです
b. ストロークの色（線の色）：strokeStyle = '色の名前または16進数の色の値'
c. エンドポイントの形状: lineCap = 'shape'

butt: デフォルト値、端点の形状なし、まっすぐな四角いエッジを表示
round: ラウンドエンドポイント
正方形: 正方形の端点

E. ラインパス: 同じキャンバスにいくつの接続エンドポイントを追加しても、パスは 1 つだけです。
a. 新しいパスを開始する: beginPath()
b. パスを閉じる: closePath()
c. パスの塗りつぶし: fill()
例

ontext.strokeStyle = 'red' //線の色 context.moveTo(10,10); //開始位置 context.lineTo(10,100); //接続の終点（垂直線）
context.lineTo(100,100); //接続エンドポイント（水平線）
context.closePath();//パスを閉じるcontext.stroke();//Strokecontext.fill(); //塗りつぶし

（２）円を描く：arc(x, y, r, 開始角度, 終了角度, 方向)
x、y: 円の中心の座標 r: 円の半径開始角度: 円周率を指定できます終了角度: 開始角度と同じ方向: 描画方向 (時計回り、反時計回り)、true の場合は反時計回り、false の場合は時計回り (デフォルト)
例

var キャンバス = document.getElementById('cavs');
var コンテキスト = canvas.getContext('2d');
コンテキスト.arc(150,80,50,0,2.0*Math.PI)
コンテキスト.ストローク()

2. ページストレージ技術

セッション追跡技術、HTTPプロトコルはステートレスプロトコルであり、サーバーはセッション追跡技術を使用して、リクエストを送信したクライアントを特定する必要があります。
1. オリジナルの保存方法（セッショントラッキング技術）：クッキー経由で保存
（1）サーバーによって生成され、クライアントのブラウザバッファに保存される
（２）クッキー方式のデメリット
A. HTTP メッセージに Cookie が添付されるため、データトラフィックが目に見えない形で増加します。
B. クッキーは HTTP メッセージ内のプレーンテキストで送信されるため、安全性が低く、簡単に盗まれる可能性があります。
C. クッキーはブラウザに保存され、改ざんされる可能性があります。サーバーはデータを受信した後、そのデータの正当性を検証する必要があります。
D. ブラウザは Cookie の数とサイズを制限しています (通常は 50 個まで、各 Cookie は 4 KB 以下)。これでは複雑なストレージ要件を満たすには不十分です。
2. HTML5ページ保存方式（ウェブストレージ）
（1）localStorage：永続的なローカルストレージ。キーと値の形式で保存されます。ユーザーまたはスクリプトによってクリアされない場合は、ローカルコンピューターに保存されます。
（２）セッションストレージ：
A. セッション: セッション。 Web 開発では、セッションはブラウザが開かれた時点から閉じられる時点までであり、ブラウザが閉じられるとセッションは終了します。
B. sessionStorage: データはブラウザのメモリに保存されます。ブラウザを閉じると、メモリ内のデータは自動的に消去されます。そのライフサイクルはセッションのライフサイクルと同じです
(3) localStorageとsessionStorageの違い
A. ライフサイクルが異なります。localStorage は永続的ですが、sessionStorage はセッションと同じライフサイクルを持ち、セッションが終了するとデータは消えます。
B. 異なる保存場所: localStorage はハードディスクに保存され、sessionStorage はブラウザのメモリ (ブラウザキャッシュ) に保存されます。

例: キャンバスを使用して棒人間を描く

<本文>
	<キャンバスid="cas" 幅="1000" 高さ="1000"></キャンバス>
</本文>
</html>
<スクリプト>
	var cas = document.getElementById('cas');
	var コンテキスト = cas.getContext('2d');
	// 頭を描画します context.arc(400,100,30,0,2*Math.PI);
	コンテキスト.lineWidth='5';
	コンテキスト.stroke();
	//胴体を描画します context.beginPath();
	コンテキストを400,130に移動します。
	コンテキスト.lineTo(400,140);
	コンテキスト.lineWidth='5';
	コンテキスト.stroke();
	コンテキスト.beginPath();
	コンテキストを400,140に移動します。
	コンテキスト.lineTo(400,260);
	コンテキスト.lineWidth='25';
	コンテキスト.stroke();
	//フォルダーを描画します context.beginPath();
	コンテキストを360,200に移動します。
	コンテキスト.lineTo(440,200);
	コンテキスト.lineTo(440,250);
	コンテキスト.lineTo(360,250);
	コンテキスト.closePath();
	context.fillStyle='#fff';
	コンテキストを埋め込む();
	コンテキスト.lineWidth='2';
	コンテキスト.stroke();
	//腕を描画します context.beginPath();
	コンテキストを400,140に移動します。
	コンテキスト.lineTo(440,200);
	コンテキスト.lineTo(400,240);
	コンテキスト.lineWidth='10';
	コンテキスト.stroke();
	コンテキスト.beginPath();
	コンテキスト.arc(400,240,10,0,2*Math.PI);
	コンテキスト.fillStyle='#000';
	コンテキストを埋め込む();
	// 脚を描画します context.beginPath();
	コンテキストを380,400に移動します。
	コンテキスト.lineTo(400,260);
	コンテキスト.lineTo(420,400);
	コンテキスト.lineTo(400,240);
	コンテキスト.lineWidth='10';
	コンテキスト.stroke();	
	コンテキスト.beginPath();
	コンテキスト.arc(365,400,15,0,1*Math.PI,true);
	コンテキスト.closePath();
	コンテキスト.lineWidth='5';
	コンテキスト.stroke();
	コンテキスト.beginPath();
	コンテキスト.arc(405,400,15,0,1*Math.PI,true);
	コンテキスト.closePath();
	コンテキスト.lineWidth='5';
	コンテキスト.stroke();
</スクリプト>

効果は図の通りです。パラメータを変更することで、好きな形を描くことができます。

ここに画像の説明を挿入

JavaScript での HTML キャンバスとページストレージテクノロジの使用に関するこの記事はこれで終わりです。より関連性の高い js HTML キャンバスコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: