Blog

HTML5のCanvasでレスポンシブなリンク – 矩形(四角)編

HTML5のCanvasはFlashの役割を次ぐことを目的にしたものですが、

その場合、Canvas内の要素にリンクをつけることが一つのポイントになります。

また、現在はさまざまな画面サイズのデバイスに対応したレスポンシブデザインが基本になりつつあるため、

Canvasのリンクもレスポンシブに対応させることが必要になります。

 

今回その方法について調べてみました。

まずは、一番設置の簡単な矩形(四角形)での方法からご紹介いたします。

 

↓こちらがDEMOです

DEMO

 

方法

1.canvasの準備をする。

HTML, CSSでレスポンシブのCanvasを設置します。

 

 

2.描画、リンクさせる要素の設定をする。

 

3.実装する

 

JavaScriptコード全文

 

参考にさせていただいたサイト

HTML5 Canvasのクリック(Mousedown)を取得し、選択位置により処理を切り替える

 

↓円弧編はこちら

HTML5のCanvasでレスポンシブなリンク – 円弧編

↓多角形編はこちら

HTML5のCanvasでレスポンシブなリンク – 多角形編

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧

越境ECの最新情報

人気の記事

越境EC関連の記事

月から探す

ページTOPへ