[69-2] Canvasに基本的な図形を描こう
最終更新日:2019年02月06日 (初回投稿日:2014年03月27日)今回は、Canvasに基本的な図形を描いてみます。
今回は、四角形、三角形、円弧を作り、色指定(線や、塗りつぶし、色の透明度)もやってみます。応用で、扇型を作り、円グラフも作ってみます。
今回のサンプルはこちら。
(クリックでサンプルが別ウィンドウで開きます)
Canvas の準備
HTML上に<canvas>要素を作っておきます
<canvas>要素をHTML上に作っておきます。
width属性、height属性でサイズ指定し、id属性で名前を付けます。
(サイズはCSSなどで指定してもOK)
<canvas>と</canvas>の間に、未対応ブラウザ用の代替コンテンツも入れられます。
代替コンテンツは <canvas>に対応したブラウザでは表示されません。
<canvas id="canvas1" width="678" height="200">
<!--↓代替えコンテンツ-->
<img src="image.png" alt="図形">
</canvas>
これで、透明な四角いキャンバスが画面上にできます。
この<canvas>要素の左上の角が、描画の基準点 (x=0, y=0) になるって覚えておこう。
<canvas>要素に関しては、もうこれ以上すること無し。
CSSでスタイルを指定することぐらい。(マージンとか背景色などを適宜指定します)
JavaScriptの「実行のタイミング」と「実行するfunction(関数)」
実行のタイミング は、
ただ普通に表示するだけなら「onload = function()」を使います。
これは このHTMLファイルがロードされたタイミングで実行 という指令。
ロード時に実行するには、<body>要素に <body onload="関数名();"> と書く方法もあるけど、
onload は<script>要素内で指定するほうが良いそうです。
クリックした時に実行したければ「onclick="関数名()"」で指定。これは後日詳細。
実行するfunction(関数)は、
function 関数名() { } で、{ } の中に、描画のためのコードを書きます。
関数名は、なんでも好きな名前でOK。サンプルでは kihon にしています。
「実行のタイミング」と「実行するfunction」は順不同。どっちが先でも後でもOK
<script>
// ↓ 実行のタイミング
onload = function() {
kihon();
};
// ↓ 実行するfunction
function kihon() {
// ここに kihon() の内容を書く
}
</script>
HTMLファイルに JavaScript を書く場所は、
HTML の<head>部分でも <head>部分でもどちらでもOK。
<script>要素を使います。
<script>要素の詳細は「[44] scriptでスクリプトを読み込む or HTMLに直接書く」をご覧ください。
サンプルでは、ソースコードが見やすいように HTMLの<head>部分に全部書いてますが、Canvasのソースコードは長くなりがちなので、外部ファイルにしたほうが良いかも。
拡張子「.js」をつけたファイルにして、<script>要素で読み込みます。
<script src="○○○.js"></script>
複数の function を指定したい場合
<canvas>要素が複数ある場合は、function も分けたほうが編集しやすいです。
複数の function を指定したい場合には、下記のように描けばOK。
onload = function() {
kihon();
pie();
};
function kihon() {
// ここに kihon() の内容を書く
}
function pie() {
// ここに pie() の内容を書く
}
「対象にする canvas」を指定し、「2Dコンテキスト」を取得する
では、「実行する function」の中身を書いて行きます。
最初に 対象にする <canvas>要素 を特定します。
そしてその Canvasに 2Dコンテキストの指定もします。
function kihon() {
var cnvs = document.getElementById('canvas1');
var ctx = cnvs.getContext('2d');
ctx.strokeStyle = .....
// ここに kihon() の内容が続く
}
1行目の「var cnvs = document.getElementById('canvas1');」は、
対象にする Canvas を指定しています。
<canvas>要素に付けたID名を呼び出し、その<canvas>要素を、ここでは「cnvs」という変数に代入しています。変数名は好きにつけてOK。
2行目の「var ctx = cnvs.getContext('2d');」は、
1行目でターゲットにした canvas を、2D(2次元=平面)グラフィックスとして扱うと指定しています。canvas のために用意されている 2Dコンテキストを取得するための指定です。
で、その2Dで扱うグラフィックスを、変数「ctx」と呼ぶ、と指定しています。
この変数名も好きに付けてOK。ここでは context の略で「ctx」とつけました。
ちなみに、
このように丁寧に2行に分けなくても、
「var ctx = document.getElementById('canvas1').getContext('2d');」
という書き方でも同じです。こっちのほうがカンタンかも。
これ以降、この変数「ctx」を使って、「ctx.strokeStyle = . . . 」といった具合で、グラフィックスを指定して行きます。
で、「canvas1」という名の<canvas>への描画が行われるというわけです。
四角形を描く
ではさっそく、まずは基本の四角形を描いてみます。
四角形は「Rect」で表します。Rect は Rectangle(矩形, 長方形)の略です。
- strokeRect(x,y,w,h); で、線による四角形を描く
x,yは四角形の左上の角の座標。座標の基準は <canvas>の左上を x=0, y=0 とします。
wは四角形の幅、hは高さ。ピクセルで指定します。 - fillRect(x,y,w,h); で、塗つぶしの四角形を描く
- clearRect(x,y,w,h); で、その四角形の領域をクリア(透明に抜く)
上記の四角形の指定だけだと、clearRect以外はデフォルトの黒で描画されます。
(strokeRectは黒い線で、fillRectは黒い塗りで表示されます)
ですので必要に応じて色指定をします。
線の色指定は「strokeStyle」、塗りの色指定は「fillStyle」で行います。
とりあえずサンプルの四角形のソースを見てみましょう。
(クリックでサンプルが別ウィンドウで開きます)
// 四角形_線(strokeStyleで線の色、strokeRect(x,y, width,height)で四角形)
ctx.strokeStyle = 'rgb(0,191,255)';
ctx.strokeRect(35,50, 100, 100);
// 四角形_塗りつぶし(fillStyleで塗りの色、fillRectで四角形)
ctx.fillStyle = 'rgb(129,200,49)';
ctx.fillRect(170,50, 160,100);
// 四角形_くりぬき(clearRectでくりぬき)
ctx.clearRect(230,60, 40,80);
上のサンプルソースでは、rgb() で色指定をしていますが、#ccc など、CSSで使用する指定方法なら何でも使えます。
色指定は描画の前に。これは鉄則です。
ちなみに、
線も塗りもある四角形を作りたい場合もあります。そんなときは、
同じ座標の fillRect と strokeRect を指定する(四角形を2コ重ねて作る)か、
下の、三角形を描く(多角形を、パス(線)で描画する)の要領で四角形を作れば、線と塗りを同時に指定することができます。
canvasでの色指定について(線や塗りの色、透明度)
色指定や透明度の指定は 描画より「前に」書きます。コレ重要!
描画した後で色指定してもムリ。真っ黒。
★色指定の方法はCSSと同じで、16進数や rgb() naどが使えます。
(グラデーションの場合は、CSSの指定とは異なります(後日詳細) )
// 線の色指定の例
ctx.strokeStyle = 'rgb(0,191,255)';
// 塗りの色指定の例
ctx.fillStyle = '#fff';
★透明度の指定
-
rgba()
rgba() で、() の中に、red, green, blue, alpha の順に数値で指定しますが、
最後の alpha が透明度。0〜1で表し、0が透明。1が不透明(100%)。
50%の半透明にしたければ、 0.5 にします。
この指定は、特定の線や塗りにピンポイントで適用できます。//塗りの半透明の例 ctx.fillStyle = 'rgba(255,153,153,0.5)';
-
globalAlpha
これは色の指定とは別に、描画するグラフィクスの透明度を指定するもの。
透明度は0〜1で表し、0が透明、1が不透明(100%)なのは上と同じ。
1度指定すると、それ以降の描画が全部この透明度になるので要注意。
不要になったら透明度100%に戻す指定が必要です。ctx.fillStyle = '#ff9'; ctx.globalAlpha = 0.5; /*透明度50%にする*/ ctx.fillRect(170,50, 100,100); ctx.globalAlpha = 1; /*透明度を100%に戻す(じゃ無いとコレ以降全部透明度50%になる)*/
三角形を描く(多角形を、パス(線)で描画する)
多角形は「パス(線)」で描きます。これは円弧や曲線も同じ。直線か曲線かの違い。
canvas での「パス(線)」の概念は、図形全体を「パス」、1辺(点と点を結んだ線)を「サブパス」と言うそうです。
三角形なら、3本の「サブパス」からできた「パス」というわけです。
多角形のパスの描き方は、
- beginPath(); で、描画の開始を宣言
- moveTo(x,y); で、サブパスの開始点をx,y座標(ピクセル)を指定
moveTo が開始点ってのがミソ。ペンで描くときも、まずは最初の点にペン先を移動させてから描き始めますよね。 - lineTo(x,y); で、直線のサブパスを引く次の点のx,y座標(ピクセル)を指定
line は直線です。 - closePath(); で、始点(moveTo(x,y); の座標)に直線を引いてサブパスを閉じる
closePath(); は直線で始点まで自動的に線を引きます。 - strokeStyle または fillStyle で、線 or 塗りの色指定をする
*四角形の場合と違ってココで色指定します。描画の前だから。
(サブパスの指定だけでは描画しません) - stroke(); または fill(); で、線 or 塗りで描画します
*線と塗りは両方指定できます (サンプル参照)
サンプルの三角形のソースです。
(クリックでサンプルが別ウィンドウで開きます)
// 三角形_(多角形はmoveTo(x, y)で始点、lineTo(x, y)で直線、closePath()で始点に戻る)
ctx.beginPath();
ctx.moveTo(428, 40);
ctx.lineTo(368, 158);
ctx.lineTo(496, 158);
ctx.closePath();
ctx.fillStyle = '#FFF';
ctx.fill();
ctx.strokeStyle = '#FF9999';
ctx.stroke();
lineTo(x,y); で、2本しか直線を書いてないことに注目。(4〜5行目)
最後の1本は3行目の closePath(); で自動的に始点(moveTo(x,y); の座標)に向かって直線が引かれます。
円弧を描く
円弧は「arc」で表します。arc はそのまんま arc(円弧)です。
円の中心点と半径を決め、始点を決めて、終点を360°のところにしてグルッと1周すれば「円」、終点をどこか1点に決めれば「円弧」になります。
円弧の描き方は、
- beginPath(); で、描画の開始を宣言
- arc(x, y, radius, startAngle, endAngle, anticlockwise); で円弧を指定
- strokeStyle または fillStyle で線 or 塗りの色指定をする(ここからは多角形の時と同じ)
- stroke(); または fill(); で線 or 塗りで描画 *線と塗りは両方指定できます
2.の arc(x, y, radius, startAngle, endAngle, anticlockwise); について
- x, y は、円の中心点の座標
- radius は、円の半径
- startAngle は、始点を角度で指定。ラジアン単位で指定
- endAngle は、円弧の終点。同じくラジアン単位で指定
Angle(角度)に関しては、時計の3時にあたるところが 0 って決まっています。 - anticlockwise は、円弧を描く方向。
anticlockwise は「反時計回り」のイギリス英単語(米英語で counterclockwise だって)
なので、この値が true だと「反時計回り」、false だと「時計回り」になります。
図説するとこんなかんじ ↓

- 度数を ラジアン(radian)へ変換
-
普通、角度を表すときの単位は「度(°)」を使いますが、
<canvas>での円弧の描画には、この「ラジアン(rad)」を使います。
角度を書くときは「度数法からラジアンに変換」して書いてあげる必要があります。1ラジアンは「180°/π」です。( / は ÷ の意味)
π(パイ)は円周率(3.14159...)「半径 × 半径 × π = 円の面積」のアレ。
だから度数法に換算すると、1ラジアン = 約57.29578度 。あら面倒くさい。1ラジアン = 180度 ÷ π なので、1度 = 1ラジアン ÷ (180度 ÷ π) ってことですね。
1度 = 1ラジアン ÷ π分の180度(分数で考えます)ってことは、
1度 = 1ラジアン × 180度分のπ
(分数で割る時、分母と分子をひっくり返してかける、って習ったよね。懐かしい)ってことで「1度 = 1ラジアン × π ÷ 180度」となります。「1度=1 × π ÷ 180」ね。
度数法からラジアンに変換
理屈はともかく「度数法からラジアンに変換」するのは、公式による指定をするだけなので、実はカンタンです。
公式では、π は数学関数の式「Math.PI」で表現するので
「度数 * Math.PI/180」 で書けばOK。( * は × の意味)例えば30度をラジアンで指定するなら「30*Math.PI/180」、
72度なら「72*Math.PI/180」。公式を覚えてしまえばカンタンですね。90度の場合は「90*Math.PI/180」なので、「Math.PI/2」でOK。
180度の場合は「180*Math.PI/180」なので、「Math.PI」だけでOK。
360度の場合は「360*Math.PI/180」なので、「2*Math.PI」と書きます。
「Math.PI*2」と書いても同じ。(サンプルではこっちで書いてます)
サンプルの円弧のソースです。
(クリックでサンプルが別ウィンドウで開きます)
- 2つめの「半円_塗り」は、
0度(時計で3時のところ)から、時計回り(=false)で180度(Math.PI)で描画しています。 - 最後の「円弧_塗り」(昔のダイエーのマークみたいなヤツ)は、
20度(時計の4時くらい)のところから、反時計回り(=true)でグル〜っと「90度(時計の6時)」のところまで円弧を書いています。 - どっちも「塗り( fill() )」の描画をしたので、終点から開始点に直線状に塗りの境界ができています。線(stroke() )で描画すれば、円弧の線だけの表示になります。
// 円_線(arc(x, y, radius, startAngle, endAngle, anticlockwise)) ctx.beginPath(); ctx.arc(410, 105, 30, 0, Math.PI*2, false); ctx.strokeStyle = '#6DD900'; ctx.stroke(); // 半円_塗り ctx.beginPath(); ctx.arc(450, 105, 30, 0, Math.PI, false); ctx.fillStyle = '#FFC926'; ctx.fill(); // 円_塗り_透明度50% ctx.beginPath(); ctx.arc(430, 135, 30, 0, Math.PI*2, false); ctx.fillStyle = 'rgba(255,153,153,0.5)'; /* rgba の a (alpha) で透明度を0.5 (50%) にしています */ ctx.fill(); // 円弧_塗り(正円じゃなく、途中で途切れた円弧です) ctx.beginPath(); ctx.arc(580, 100, 60, 20*Math.PI/180, 90*Math.PI/180, true); ctx.fillStyle = '#DBA1AB'; ctx.fill();
円弧の応用で扇型を作ろう
扇形のサンプルは、サンプルの後半にあります。
(クリックでサンプルが別ウィンドウで開きます)
まずはこの扇型を1コ作ってみます。
扇型の描き方は、
- beginPath(); で、描画の開始を宣言
- moveTo(x,y); で、円の中心点を開始点としてx,y座標(ピクセル)を指定
- arc(x, y, radius, startAngle, endAngle, anticlockwise); で円弧を指定
これで、2.の開始点から startAngle まで、自動的に直線が引かれます - closePath(); で、パスを閉じる
これで、endAngle から 2.の開始点まで、自動的に直線が引いてパスを閉じます - strokeStyle または fillStyle で線 or 塗りの色指定をする(ここからは多角形のときと同じ)
- stroke(); または fill(); で、線 or 塗りで描画 *線と塗りは両方指定できます
onload = function() {
kihon();
pie();
};
function pie() {
/* canvas要素 idで指定し、2Dコンテキストをゲット*/
var cnvs2 = document.getElementById('canvas2');
var ctx2 = cnvs2.getContext('2d');
/* まずは扇形の基本 */
ctx2.beginPath();
/* 円弧の中心点をパスの始点にする */
ctx2.moveTo(100,100)
/* 円弧を指定。パスの始点から円弧の始点まで自動的にパスが引かれる */
ctx2.arc(100, 100, 60, 0, Math.PI/2, false);
/* 円弧のパスを終わらせると、自動的に始点に線を引いてパスを閉じてくれる */
ctx2.closePath();
/* 色を指定して塗りつぶす */
ctx2.fillStyle = '#FFCEBE';
ctx2.fill();
}
扇型で円グラフを作ってみよう
円グラフののサンプルです。クリックで別ウィンドウで開きます。
作り方は、サンプル上のソースコードをご覧ください。
扇形の描き方の応用で、中心点が同じ扇型を並べているだけです。
*このサンプルでは「テキスト」も描いてますが、テキストに関しては後日詳細。
次回予告
今回は、2Dコンテキストの取得から基本図形まででしたが、実際に図形を描いてみると基本がわかってきて、ちょっと楽しくなってきましたよ。
次回は曲線を描いてみます。
Illustrator などを使っている人はよく知ってる「ベジェ曲線」も Canvasで描くことができます。
線のスタイル(太さや、先端の形状など)の指定もやってみます。
- 関連記事
-
- (ちょっとメモ)Canvasで便利な javaScriptライブラリ
- [69-8] Canvasでテキストを描画しよう
- [69-7] Canvas上の重なった描画領域を指定しよう (globalCompositeOperationプロパティ)
- [69-6] Canvasにマウスの動きに合わせて描画しよう (クリックやマウスムーブとの組み合わせと Math.random)
- [69-5] Canvasにグラデーションやパターン、シャドウを指定しよう
- [69-4] Canvasに画像を描画しよう(トリミングやクリッピングも)
- [69-3] Canvasに曲線を描こう(線のスタイルも)
- [69-2] Canvasに基本的な図形を描こう
- [69-1] canvas要素でグラフィックスを表示する領域を作ろう
- [68] 動画や音声に字幕やキャプションを表示しよう track要素
- [67]「mediagroup属性」でメディア要素を同期させよう
- [66] 音声をプラグイン無しで組み込もう audio要素・source要素
- [65] 動画をプラグイン無しで組み込もう video要素・source要素
- [64] プラグインで再生されるコンテンツを組み込もう embed要素
- [63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク