Canvasでいろいろな図形を描く

HTML5 Canvasを使い様々な図形を描く

矩形を描く



fillRect(x,y,width,height) : 塗られた矩形を描く
strokeRect(x,y,width,height) : 矩形の輪郭を描く
clearRect(x,y,width,height) : 指定された領域を消去し、完全な透明にする
※ x と y は 矩形の左上の角の canvas 上での位置(原点から相対的)を指定する。 width と height はそれぞれ矩形の幅と高さ。

パスを使って図形を描く

● 三角形を描く



beginPath() : パスの描画開始
moveTo(x, y) : 新しい始点の座標
closePath() : 現在の点から始点に向けて直線を描くことで図形を閉じる。もし図形がすでに閉じられているかリストに点がひとつしかない場合はこの関数は何もしない
stroke() : 輪郭の描かれた図形を描く
fill() : 単色の図形を描く(※fill メソッドがと呼ばれるときは、開いている図形は自動的に閉じられるため、 closePath メソッドを使う必要はない )

● 星を描く



円を描く



arc(x, y, radius, startAngle, endAngle, anticlockwise) : x と y は円の中心。Radius は円の半径。startAngle と endAngle パラメタは円弧の始まりと終点を定義。始まりと終わりの角度は x 軸から計算する。
anticlockwise パラメータは true の時には円弧を反時計回りに、それ以外は時計回りの方向に描くブーリアン値。

● ピースマーク(円の応用)



ベジェ曲線を使って図形を描く

● ハートマーク



quadraticCurveTo(cp1x, cp1y, x, y) : 二次ベジェ曲線
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) : 三次ベジェ曲線
x と y パラメタは終点の座標。cp1x と cp1y は最初の制御点、 cp2x と cp2y は二番目の制御点の座標

【参照サイト】
Mozilla Developer Network
HTML5 Canvas Tutorials

Google Web Fonts API を使う

GoogleWebFonts …. アカウント登録不要で、全てのフォントがオープンソース(SIL Open Font License (OFL))。

Google Web Fonts API
Google Web Fonts List
 
 
①リストから使いたいフォントを選んで、Quick-use をクリック。
  ※ Preview Text: にテキストを入力して確認できる。

 
② Add this code to your website:に表示されているタグをHTMLにコピペ。フォントのスタイルを追加。

 
HTMLに追加するタグ

<link href=’http://fonts.googleapis.com/css?family=’Playball’ rel=’stylesheet’ type=’text/css’>

 
スタイルシートにフォントのスタイルを記述

.webfonts {
font-family: ‘Playball’, cursive;
font-size: 48px;
color:#59493f;
text-shadow: 4px 4px 4px #A6937C;
}

 
 
 

A Drawerful of Sweet Memories.

(Playball を使用) 

 
 

複数のフォントタイプを読み込む
<link href=’http://fonts.googleapis.com/css?family=’Ruge+Boogie|Ribeye+Marrow|Metamorphous’ rel=’stylesheet’ type=’text/css’>

 
( | )で区切って、複数のフォントを読み込む。また、フォント名にスペースを含む場合は、スペースの部分を( + )に置き換える。
 
 
A Drawerful of Sweet Memories.

(Ruge Boogie

A Drawerful of Sweet Memories.

(Ribeye Marrow

A Drawerful of Sweet Memories.

(Metamorphous

 

イタリック、ボールドを指定してフォントタイプを読み込む
<link href=’http://fonts.googleapis.com/css?family=’Marko+One:bold’ rel=’stylesheet’ type=’text/css’>

 
フォント名の後ろにコロン( : )をつけて、スタイルを指定する。スタイルを複数指定する場合は、カンマ( , )で区切る。
 
 
A Drawerful of Sweet Memories.

(Marko One

 

文字を指定してフォントを読み込む(Beta)

リクエストした文字に対して、最適化されたフォントファイルを取得する。必要な文字のみを効率的に取得して表示できる。
サイトのロゴなどに使用。

<link href=’http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC&text=Drawerfuls’ rel=’stylesheet’ type=’text/css’>

 
text= に文字列を指定する。
  Drawerfuls

(IM Fell DW Pica SC

 

ブラウザサポート
    Google Chrome: version 4.249.4+
    Mozilla Firefox: version: 3.5+
    Apple Safari: version 3.1+
    Opera: version 10.5+
    Microsoft Internet Explorer: version 6+
     
    モバイルデバイス: Android 2.2+, iOS 4.2+ (iPhone, iPad, iPod)

 
 
 
*********************************************************
 
 
<その他参考項目>

サイトで使用されているフォントを表示するChromeのExtension

WhatFont
 

 

日本語WebFontサービス

デコもじ
もじでぱ
フォントプラス