サイト内検索

Canvas

このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。

Canvasとは

Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。

Canvasの使い方

実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。

いろいろな図形を描く

Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。

色を指定する

このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。

線形グラデーションを指定する

このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法を紹介します。グラデーションの処理に関しては、ブラウザごとに若干の違いがあります。このコーナーではブラウザごとの特徴についても触れていきます。

円形グラデーションを指定する

線形グラデーションに続き、今度は円形グラデーションです。線形グラデーション以上にブラウザの互換性がないため、使いづらい点はありますが、ビジュアル重視のCanvasを作りたいのであれば、知っておきたい知識です。

画像を組み込む

Canvasでは、JPEGやPNGといったブラウザに対応した画像であれば、それを組み込むことができます。このコーナーでは、画像の組み込み方法と、いくつかのオプション機能について紹介していきます。

Canvasリファレンス

Canvasで利用できるメソッドの網羅しました。各メソッドごとにサンプルをご用意しましたので、具体的なスクリプティングが理解できます。ブラウザごとの対応についても触れています。