HTML5のcanvas要素を試す【1】

このページでは、HTML5のcanvas要素を使ったサンプルを紹介します。

canvas要素って何

・canvas要素を使えば、ウェブページにJavaScriptで図を描けます。
・canvas要素はビットマップグラフィクスのため、高速で、アニメーションに向いています。

canvasの基本の書き方

JavaScriptでcanvas要素の中に図を描くためには、2Dコンテキストが必要です。

このコンテキストを使って描画をしていきます。

長方形を描く

実際に長方形を描いてみます。

JavaScriptは以下のようになります。

半透明にする

図形を半透明にします。

JavaScriptは以下のようになります。

グラデーション

グラデーションには線形グラデーションと円形グラデーションがあります。
どちらの場合も、グラデーションを描画するにはCanvasGradientオブジェクトが必要です。

線形グラデーション

円形グラデーション

パスを使った複雑な図形

パスとは、線の集まりです。パスを使うと、多角形や円弧、二次曲線など複雑な図形を描画できます。

多角形を描く

円弧を描く

円弧を描くには2通りの方法があります。まずは、中心位置と半径で円弧を描く方法です。

次は、始点と終点を指定して円弧を描く方法です。
これは、2つの直線を円弧で結ぶ場合に便利です。これを利用して、角の丸い三角形を描いてみます。

ベジェ曲線を描く

ベジェ曲線は、自由な曲線を描くために使います。
canvasでベジェ曲線を描くには三次ベジェ曲線と二次ベジェ曲線の2通りの方法があります。
ベジェ曲線を簡単に説明することは難しいので、ここでは3次ベジェ曲線を使ってハートマークを描くサンプルだけ載せます。

広告
  • LINEで送る