HTMLキャンバス入門

Feb 9, 2026

操作方法

HTML＆lt; CANVAS＆GT。要素は、Web上でピクセルベースのグラフィックを作成するための強力なソリューションです。 javascript. そして、少し練習でいくつかの著しい効果を生み出すことを可能にします。

このチュートリアルでは、キャンバスオブジェクトの作成、単純なビジュアルを描画し、それらのビジュアルをアニメート化することを見ます。

01.ページを作成します

キャンバスは基本的にあなたがページ上に置くHTML要素であり、あなたが望む領域を覆うためにスケールで描くことができます。始めるには、キャンバスオブジェクトを持つ単純なページを作成する必要があります。

＆lt; DOCTYPE HTML＆GT;
＆lt; html＆gt;
  ＆lt;頭＆gt;
  ＆lt; Meta Charset = 'UTF-8' / gt;
  ＆lt; title＆gt; HTMLキャンバスデモ＆lt; / title＆gt;
  ＆lt; link rel = 'スタイルシート' href = 'custom.css' / gt;
  ＆lt; script src = "canvas.js"＆gt;＆script＆gt;
  ＆lt; / gt;
  ＆lt; body＆gt;
  ＆lt;キャンバスID = "HTML-CANVAS"＆gt;
  ＆lt; / body＆gt;
＆lt; / html＆gt;

02.キャンバスを拡大縮小します

遊ぶためのスペースがたくさんあるために、私たちはキャンバス全体を埋めることを望みます。あなたがそれを知っているので、黒の背景を与えます。これは実際にはスクロールバーや白い空間に終わらずにやることが少し難しいことです。以下のCSSはそれを大事にするべきです。

キャンバス{
  高さ：100VH;
  幅：100VW;
  位置：絶対;
  背景色：＃000000;
}
  マージン：0;
  パディング：0;

03.使用のためにキャンバスを初期化します

次に、CANVASを使用する準備が整うためにいくつかのJavaScriptを追加する必要があります。 CANVAS要素が準備ができるようにする前にスクリプトが実行されないようにするために、それをDomcontentLoadedイベントをオフにします。それがカバーする地域に合うようにキャンバスの解像度を設定しました - それ以外の場合、キャンバスは解像度を増加させずにスケールアップし、ぼやけまたはピクセルされたグラフィックを率います。

 document.addeventListener（ "domcontentloaded"、function（）{
  var canvas = document.getElementByID（ "HTML-Canvas"）;
  var courcles = []。
  VAR半径= 50。
  CANVAS.WIDTH = CANVAS.clientWidth。
  CANVAS.HEIGHT = CANVAS.clientHeight;
  var context = canvas.getContext（ "2D"）;
}、偽）;

04.形を描く

最後のステップでは、「コンテキスト」と呼ばれるものを区切りました。これがキャンバスの描画方法です。さまざまな線、円弧、基本形状を描くために使用できる絵筆としての文脈を考えるのが最も簡単です。

私たちが今できることは、360度の弧を作成するDrawCircle関数を書くことによって使用するための文脈を使うことです。これを行うには、アークを定義するためのコンテキスト、境界線のスタイルを設定し、塗りつぶし（）関数を上昇させて、実際に形状を描画するようにします（ストロークを描画します）。

関数DrawCrcle（x、y、radius、境界、border_colour、fill_colour）
  {
  context.beginpath（）;
  context.arc（x、y、半径、0,2 * math.pi）;
  context.strkeStyle = border_colour;
  context.fillstyle = fill_colour;
  context.linewidth =境界線;
  context.closePath（）;
  context.fill（）;
  context.stroke（）;

05.多くのサークルを作成します

すごい。円を描くことができる関数があります。今、私たちは描くべき何かが必要です。ステップ3からコードを拡張して、サークルオブジェクトを記述する配列を作成しましょう。それは各サークルのxとy座標、色、方向の値を保存します。

後でアレイの内容を再描画してサークルをアニメートすることを可能にするので、この配列構造をまっすぐに描くのではなく、この配列構造を作成します。

（48]（var i = 0; i <20; i ++）{ VAR X = RADIUS +（Math.random（）*（CANVAS.WIDTH - （2 *半径）））。 VAR y = Radius +（Math.random（）*（CANVAS.HEIGHT - （2 *半径）））。 var color = randomcolour（）; var direction = math.random（）* 2.0 * math.pi; 円→引上（{x：x、y：y、色：色：方向：方向：方向}）。ドロー（）;

06.色をランダム化します

最後のステップでは、まだ定義されていない新しい機能をいくつか使用しました。 RandomColour（）から始めましょう。これは、色を表す無作為化16進数文字列を返すユーティリティ関数になります。実装するのはかなり簡単です。

関数randomcolour（）{
  var chars = '0123456789abcdef';
  var color = '＃';
  （var i = 0; i＆lt; i ++）の場合
  color + = chars [math.floor（math.random（）* 16）]。
  }
  色を戻します。

07.ページ上のグラフィックを描きます

今、draw（）関数を実装することによって物事をまとめる準備ができています。これは2つの主なことをします。まず、ClearRect（）関数を使用してキャンバスをクリアします。私たちが古いフレームを描画するのを避けるために、私たちが私たちの円をアニメートするようになると、これは重要になるでしょう。それはそれから私たちが構築したアレイを繰り返し、私たちのDrawCrarcle関数を使用して連続してキャンバスの各円を描きます。

関数draw（）{
  context.clycrect（0,0、canvas.width、canvas.height）;
  サークル。フォワーチ（関数（円）{
  draw crircle（circle.x、circle.y、半径、5、circle.colour、circle.colour）;
    }）;）

08.シェイプをアニメートします

今すぐ試してみると、ページ上に描かれた静的サークルがいくつか表示されます。しかし、私たちはそれらをアニメートしたいです。これを行うには、いくつかの方法でgrap（）関数を拡張する必要があります。まず、circle.diriction値を使用します。円のx位置とyの位置の変化を計算するために、アレイにプッシュされます。

次に、RequestAnimationFrameという組み込み関数を再帰的に呼び出した（）関数を呼び出します。 RequestAnimationFrameは、ブラウザが次のフレームを描画するときを計算するためのタイマーを実行する必要性を回避する必要がないようにブラウザがいつ再度実行することを可能にします。

関数draw（）{
  context.clycrect（0,0、canvas.width、canvas.height）;
  サークル。フォワーチ（関数（円）{
  circle.x = circle.x + math.cos（circle.direction）;
  circle.y = circle.y + math.sin（circle.direction）;
  draw crircle（circle.x、circle.y、半径、5、circle.colour、circle.colour）;
  }）;）
  requestAnimationFrame（描画）;

09.ページの端に跳ね返る

しかし、まだ行方不明のことがあります。サークルが画面の端から消えて消えます。彼らをバウンスバックさせましょう。これを行うには、draw（）関数のForeachループ内で、新しい関数、バウンス（丸）に呼び出します。

バウンス関数は、円が画面の端にあるかを決定し、その方向の値を適切に調整します。

関数バウンス（円）{
  if（（（circle.x  -  radius）<0）||（（circe.y  -  radius）<0）||（（circe.x +半径）＆gt; canvas.width）||（（円） y +半径）＆gt; canvas.height））{
  circle.direction + =（math.pi / 2）;
  }
  if（circle.direction＆gt;（2 * math.pi））{
  circle.direction  -  =（2 * math.pi）;
  }

この記事は最初に登場しました ウェブデザイナー 問題266。 ここで購入してください。

関連記事：

キャンバスを使ってデジタルエッチングを作成します
新しいNode.js 8について知っておく必要があるすべて
エフェクトアニメーションアニメーションをHTML5にエクスポートする方法

HTMLキャンバス入門

01.ページを作成します

02.キャンバスを拡大縮小します

03.使用のためにキャンバスを初期化します

04.形を描く

05.多くのサークルを作成します

06.色をランダム化します

07.ページ上のグラフィックを描きます

08.シェイプをアニメートします

09.ページの端に跳ね返る

操作方法 - 最も人気のある記事

あなたのブラシペンの描画を改善するための6つのクイックヒント

脳を使用してニューラルネットワークを構築する

CSSでグリッチテキストとイメージ効果を作成する方法

3Dプリントゴブリンを彫刻する方法

Photoshopでセンセーショナルな夕日を作成する

伝統的およびデジタルスキルを組み合わせてコミックカバーを作成する

ハーレー・クインを描く方法

あなたのデザインワーク内で創造的にストック写真を使う方法

カテゴリ