キャンバスの使い方-H5 チュートリアル-php.cn

キャンバスの使い方

不言

リリース： 2021-04-20 10:12:42

オリジナル

10505 人が閲覧しました

Canvas の使用方法: まず、ターゲットの位置決めにドキュメントオブジェクトモデル (DOM) を使用し、次に id 属性を使用して一致するターゲットの位置を特定し、最後に Canvas 上にグラフィックを描画します。

キャンバスの使い方

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。

Canvas は、JavaScript プログラミング言語を使用して簡単かつ強力なグラフィック描画を可能にする HTML5 要素であり、開発者はこれを使用してリッチな Web アプリケーションを作成することが人気です。ユーザーは、Adobe の Flash Player などの独自のブラウザプラグインを使用せずに、これらのアプリケーションを使用できます。

Canvas 要素の使用方法を詳しく見てみましょう。

canvas 要素はグラフィックスのコンテナとしてのみ使用できるため、グラフィックスのレンダリングには JavaScript を使用する必要があります

Canvas 上にグラフィックスを描画するときは、最初にドキュメントオブジェクトモデルを使用する必要があります。 (DOM) ターゲットの位置決め用。また、id 属性を使用すると、一致するターゲットの場所を識別するのに役立ちます。

canvas 要素のコードを見てみましょう

<canvas width="320" height="160" id="canvasExample"></canvas>

ログイン後にコピー

Canvas 要素では、幅と高さという 2 つの特定の属性を使用できます。

これら 2 つのプロパティの値を指定しない場合、キャンバスは幅に 300 ピクセル、高さに 150 ピクセルのデフォルト値を使用します。

ID 属性は、JavaScript コードで Canvas 要素を識別するために使用されます。

最初は、

Canvas 要素には、getContext という組み込みの DOM メソッドがあります。これは、レンダリングコンテキストとその描画メソッドにアクセスするために使用される JavaScript 関数です。

この関数は単一の引数を受け入れます。通常は 2D グラフィックスコンテキスト (「2d」として定義) です。

たとえば、Canvas

上に長方形の形状を作成するには、次のプロパティが必要です。関数: fillStyle="color" - 長方形に色を追加します。

fillRect(x,y,width,height) - 塗りつぶされた四角形を描画します

strokingRect(x,y,width,height) - 四角形に輪郭を与えます

clearRect (x,y,width,height) - 指定された長方形のセクションをクリアし、完全に透明にします。

座標を定義するには、キャンバスグリッドまたは座標系が使用されます。元のサイズは、キャンバス領域の左上隅にあり、座標は (0,0) です。

つまり、X 座標は右に移動し、Y 座標は下に移動します。距離はピクセル単位です。

#xx は、左上隅から右上隅までの水平位置を示します。

y は、左上隅から下端までの垂直位置を示します

width は長方形を表します。 width

height は長方形の高さを表します。

具体的なコードは次のとおりです。


 

 

 
JavaScript HTML5 Canvas Example
 

 

 
<canvas width="320" height="160" id="canvasExample"></canvas>
 
<script>
 
function canvasExample(){
 
var canvas = document.getElementById("canvasExample");
 
if(canvas.getContext){
 
var context = canvas.getContext(&#39;2d&#39;);
 
context.fillStyle = "blue";
 
context.fillRect(50,50,150,250);
 
context.clearRect(75,75,100,50);
 
context.strokeRect(90,90,75,20);
 
 
}else{
 
alert("Please a Canvas-Supporting Web Browser");
 
}
 
}
 
</script>

ログイン後にコピー

ブラウザでの表示効果は次のとおりです。次のとおり

キャンバスの使い方上記のコードの JavaScript で実装されているものは次のとおりです。