JavaScriptでのキャンバスAPIの使用

3736 ワード
webdev javascript programming design テキストリンク

キャンバスAPIとは


MDNから

The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the element, draws hardware-accelerated 2D and 3D graphics.


キャンバスAPIを始める方法

  • スクリプトタグをHTMLの間に配置する<body> タグを使用してキャンバスを開始します.
    • <canvas id="canvas" width="600" height="600"></canvas>
    慣例として、IDの名前は典型的に'キャンバス'になります.これはもちろん、あなたの選択の任意の名前、ちょうどあなたのコードの流れを最適化し、あなたに意味をなす名前を選ぶことができます.
    最初のスケルトンのセットアップが完了したら、キャンバススペースを設定するときに2つの属性が必要です.キャンバスの希望の幅と高さを設定する必要があります.また、これらの属性は、必要に応じて設計プロセスによく変更することができます.
    let canvas = document.querySelector("#canvas");
const width = canvas.width;
const height = canvas.height;

canvas.width = 400;
canvas.height = 400;

    クリエイティブ


    これらの例を考えてください、私はHTMLタグのボディタグでコーディングされます.あなたは同じ環境で私と一緒にコードを自由にするか、別のJavaScriptファイルにコードを移動します.

    基本の設定


    一旦我々が我々のHTMLコードの骨格フレームをレイアウトしたならば、我々の創造的な欲求を生命にもたらすコードを実行する時間です!
     let canvas = document.querySelector("#canvas");
 let context = canvas.getContext('2d');
  • コードのスクリプト部分に「ドキュメント」メソッドを置き、以前に作成したキャンバススペースのIDを渡して、グラフィックをカスタマイズします.まず、対応する属性のシンボルを入力してIDを対象とします.
    • クイックリフレッシュ# = id
    . = class.
  • 以下のコードはJavaScriptに、我々が作成している描画面の文脈は3 Dとは対照的に2 Dであることを示します.そして、これは図形、テキスト、および画像を作成するために使用することができます.
    • let context = canvas.getContext('2d');

    ファーストシェイプ


    ' strokerect ()メソッドで4ピクセルのストロークで概説された四角形を作成します.カラー属性は、' trokestyle () 'にチェインされた変数を呼び出し、16進数のカラーコードやJavaScriptで識別された色の名前を入力することで変更できます.今日の例では、' green 'を使います.' strokerect () 'に渡されるパラメータは単に( 100 , 100 )の左上の角を参照し、400の高さ( 400番目)で400の高さ(秒400 )を与えます.
     context.lineWidth = 4;
 context.strokeStyle = 'green';
 context.beginPath();
 context.strokeRect(100, 100, 400, 400); 
 context.stroke();

    結果



    入れ子状


    context.beginPath();
        context.arc(300, 300, 100, 0, Math.PI*2);
        context.lineWidth = 3;
        context.stroke();

    結果



    コードを再生する


    新しい図形を追加、図形のサイズを並べ替えるだけで創造的な取得し、いくつかの微調整、または主要なもので行うことができますすべてを探る!私たちの例では、大きなメインサークルの2つのサイドサークルを作成しました.
    context.beginPath();
        context.arc(400, 300, 50, 0, Math.PI*2);
        context.lineWidth = 2.5;
        context.stroke();

        context.beginPath();
        context.arc(200, 300, 50, 0, Math.PI*2);
        context.lineWidth = 2.5;
        context.stroke();

    結果



    資源

  • MDN Official Canvas API Documentation
    • 4日目:高度なUIコントロール
    BOJ 11726-2 x nタイル