Canvas の JavaScript コードはどこに記述されていますか?-フロントエンドQ&A-php.cn

Canvas の JavaScript コードはどこに記述されていますか?

PHPz

リリース： 2023-04-25 10:02:46

オリジナル

413 人が閲覧しました

Canvas は HTML5 の新機能で、JavaScript による描画操作に使用できます。では、キャンバス関連の JavaScript コードはどこに記述すればよいのでしょうか?

一般的に、キャンバス関連の JavaScript コードは、HTML ファイルの <script></script> タグに記述するか、別の JavaScript ファイルで参照する必要があります。具体的には、これは次の手順で実行できます。

HTML ファイルの作成: まず、HTML ファイルを作成する必要があります。このファイルは、テキストエディター、IDE、およびその他のツールを通じて作成できます。具体的なコードは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>画布JavaScript代码示例</title>
  </head>

  <body>
    <canvas id="myCanvas"></canvas>

    <script src="js/canvas.js"></script>
  </body>
</html>

ログイン後にコピー

これは、<canvas> タグと <script> を含む単純な HTML ファイルです。鬼ごっこ。 <canvas> タグはキャンバスを表示するために使用され、<script> タグは JavaScript ファイルを参照するために使用されます。

JavaScript ファイルの作成: 上記の HTML ファイルでは、canvas.js という名前の JavaScript ファイルを参照しました。したがって、プロジェクト内に canvas.js ファイルを作成し、その中にキャンバス関連のコードを記述する必要があります。具体的なコード例は次のとおりです。

// 获取canvas元素
let canvas = document.getElementById('myCanvas');

// 获取canvas上下文
let ctx = canvas.getContext('2d');

// 绘制矩形
ctx.fillStyle = 'orange';
ctx.fillRect(10, 10, 100, 50);

// 绘制圆形
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.arc(150, 35, 25, 0, 2 * Math.PI);
ctx.fill();

// 绘制文本
ctx.fillStyle = 'blue';
ctx.font = '20px Arial';
ctx.fillText('Hello World!', 200, 35);

ログイン後にコピー

上記のコードは、オレンジ色の四角形、緑色の円、青色のテキストを描画するために使用されます。このうち、getContext() メソッドはキャンバスコンテキストを取得するために使用され、コンテキストオブジェクトを通じて描画操作を実行できます。

HTML ファイル内で JavaScript ファイルを参照する: 上記 2 つの手順が完了したら、手順 2 で記述した JavaScript ファイルを HTML ファイル内で参照する必要があります。具体的なコードは次のとおりです。

<script src="js/canvas.js"></script>

ログイン後にコピー

上記のコードを HTML ファイルに追加した後、ブラウザは canvas.js ファイル内の JavaScript コードをロードして実行し、次のことを実現します。キャンバス描画機能です。

つまり、キャンバス関連の JavaScript コードの場合、<script> タグまたは別の JavaScript ファイルを通じて参照して、キャンバスの描画を実現できます。 JavaScript ファイルを正しく参照することは、JavaScript コードが正常に動作するようにするための鍵の 1 つです。

以上がCanvas の JavaScript コードはどこに記述されていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。