HTML5「Canvas」でおえかきアプリ

ウェブ制作技術

こんにちわ、樋口です。
ウェブの世界は数年前にHTML5が華々しく登場して、表現の幅が飛躍的に広がっています。
Flashが影を潜め、Flashが担ってきたダイナミックな演出は、HTML5の「Canvas」が担いつつあります。

「Canvas」は、その名の通りブラウザに様々なグラフィックを描画できる機能です。
ブラウザに配置した真っ白いキャンパスに、Javascriptで絵を描いていくようなイメージですね。

今回は、Canvasの機能をオーソドックスに使った、おえかきアプリを作成したので紹介します。

おえかきであそぼう

まずは完成品をごらんください。

DEMOはこちら

Canvasでおえかき

主な機能はこちらです。

  • おえかきができる
  • 線の色、太さを選べる
  • 消しゴムもある
  • 描いたものを画像として保存できる

描いたものを画像としてダウンロードできますので、夏休みの自由研究にいかがでしょうか?
もしくは一歩進んで、Canvasを使ってプログラミングというのも最近の学校では脚光を浴びそうです。

Canvasでできること

今回のお絵かきアプリは、Canvasのもっとも得意とするところです。

Canvas基本機能は、ざっと下記のようなことです。(一例)

  • 三角や四角や丸を描く
  • 上記以外にもいろんな図形を描く
  • 色を塗る
  • グラデーションで塗る
  • 図形を変形する
  • 文字を書く
  • 画像を読み込む
  • 描いているものをセーブする/復元する
  • 画像として書き出す

技術的なリファレンスは、下記に網羅されています。

http://www.html5.jp/canvas/ref.html

Canvasは非常に多機能なので、使い方によっては夢が広がります。

  • アニメーション
  • ゲーム
  • デジタルアート

当社でも、Canvasを使ったウェブ制作のご相談をお受けしております。
ベレー帽をかぶりながらお待ちしております。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。