Canvasのサンプルコード集
Canvasのプログラミングに役立つ、サンプルコード集です。
一覧
- テキストの幅を取得する方法
- テキストの幅を取得するには、measureText()を利用します。
- テキストを中央寄せする方法
- テキストをセンタリングするには、measureText()でテキストの幅を調べ、水平位置をずらします。
- テキストを描く方法
- テキストを描くには、fillText()を利用します。
- 円を描く方法
- 円を描くには、arc()を利用します。
- 円グラフを描く方法
- 円グラフを描くには、arc()の開始角度と終了角度を調整しましょう。
- 切り抜く方法
- 画像などをパス通りに切り抜くには、clip()を利用します。
- 四角形を描く方法
- 四角形を描くには、rect()を利用します。
- 回転する方法
- 回転するには、rotate()を利用します。
- 欠けた円を描く方法
- 欠けた円を描くには、arc()とlineTo()を組み合わせましょう。
- 画像に変換する方法
- Canvasを画像に変換するには、toDataURL()やtoBlob()を利用します。
- 画像を描画する方法
- 画像を描画するには、drawImage()を利用します。
- 線を引く方法
- 線を引くには、lineTo()を利用します。
- 複数行のテキストを描く方法
- 複数行のテキストを描画するには、水平位置を調整して1行ごとにレンダリングしていきます。