2014/07/30
HTML5のCanvasでレスポンシブなリンク – 矩形(四角)編
HTML5のCanvasはFlashの役割を次ぐことを目的にしたものですが、
その場合、Canvas内の要素にリンクをつけることが一つのポイントになります。
また、現在はさまざまな画面サイズのデバイスに対応したレスポンシブデザインが基本になりつつあるため、
Canvasのリンクもレスポンシブに対応させることが必要になります。
今回その方法について調べてみました。
まずは、一番設置の簡単な矩形(四角形)での方法からご紹介いたします。
↓こちらがDEMOです
方法
1.canvasの準備をする。
HTML, CSSでレスポンシブのCanvasを設置します。
|
1 2 3 | <div class="wrapper"> <canvas id="visual" width="900" height="300"></canvas> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .wrapper{ width: 960px; padding: 30px; margin: 0 auto; } @media only screen and (max-width: 960px){ .wrapper{ width: auto; padding: 10px; } canvas{ width: 100%; } } |
2.描画、リンクさせる要素の設定をする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(function(){ //canvasに描画する矩形の設定 var canvasElement = { elm1 : { left : 50, //矩形の左位置 top : 50, //矩形の上位置 width : 300, //矩形の右位置 height : 200, //矩形の下位置 color : "rgb(249, 190, 194)", //矩形の色 href : "#elm1" //リンク先 }, elm2 : { left : 400, top : 50, width : 300, height : 200, color : "rgb(206, 228, 183)", href : "#elm2" } }; ・・・ |
3.実装する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | ・・・ //canvasの描画 var canvas = document.getElementById("visual"); if(canvas.getContext){ var ctx = canvas.getContext('2d'); for(elmKey in canvasElement){ //設定した要素の数だけ繰り返す ctx.fillStyle = canvasElement[elmKey].color; //色の設定 ctx.fillRect(canvasElement[elmKey].left, canvasElement[elmKey].top, canvasElement[elmKey].width, canvasElement[elmKey].height); //矩形の描画 } } /*---------------------- canvasのクリックの設定 ----------------------*/ //canvasの基準になる大きさ(width属性で設定した値)を取得 var canvasBaseWidth = $("canvas").attr("width"); $("canvas").click(function(e){ var canvasWidth = $("canvas").width(); //canvasをクリックした時点での、canvasの大きさを取得 var ratioSize = canvasWidth / canvasBaseWidth; //縮小率を計算 console.log(ratioSize); //マウス情報の取得と設定 var rect = e.target.getBoundingClientRect(); var mx = e.clientX - rect.left; var my = e.clientY - rect.top; for(elmKey in canvasElement){ //canvasの描画で設定した要素の数だけ繰り返す //比率から実際にcanvasに表示されている要素の位置を計算し、クリックした場所が要素の場所と一致する場合は、設定したリンク先へ移動 if(canvasElement[elmKey].left * ratioSize <= mx && mx <= (canvasElement[elmKey].left + canvasElement[elmKey].width) * ratioSize){ if(canvasElement[elmKey].top * ratioSize <= my && my <= (canvasElement[elmKey].top + canvasElement[elmKey].height) * ratioSize){ location.href = canvasElement[elmKey].href; } } } }); }); |
JavaScriptコード全文
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | $(function(){ //canvasに描画する矩形の設定 var canvasElement = { elm1 : { left : 50, //矩形の左位置 top : 50, //矩形の上位置 width : 300, //矩形の右位置 height : 200, //矩形の下位置 color : "rgb(249, 190, 194)", //矩形の色 href : "#elm1" //リンク先 }, elm2 : { left : 400, top : 50, width : 300, height : 200, color : "rgb(206, 228, 183)", href : "#elm2" } }; //canvasの描画 var canvas = document.getElementById("visual"); if(canvas.getContext){ var ctx = canvas.getContext('2d'); for(elmKey in canvasElement){ //設定した要素の数だけ繰り返す ctx.fillStyle = canvasElement[elmKey].color; //色の設定 ctx.fillRect(canvasElement[elmKey].left, canvasElement[elmKey].top, canvasElement[elmKey].width, canvasElement[elmKey].height); //矩形の描画 } } /*---------------------- canvasのクリックの設定 ----------------------*/ //canvasの基準になる大きさ(width属性で設定した値)を取得 var canvasBaseWidth = $("canvas").attr("width"); $("canvas").click(function(e){ var canvasWidth = $("canvas").width(); //canvasをクリックした時点での、canvasの大きさを取得 var ratioSize = canvasWidth / canvasBaseWidth; //縮小率を計算 console.log(ratioSize); //マウス情報の取得と設定 var rect = e.target.getBoundingClientRect(); var mx = e.clientX - rect.left; var my = e.clientY - rect.top; for(elmKey in canvasElement){ //canvasの描画で設定した要素の数だけ繰り返す //比率から実際にcanvasに表示されている要素の位置を計算し、クリックした場所が要素の場所と一致する場合は、設定したリンク先へ移動 if(canvasElement[elmKey].left * ratioSize <= mx && mx <= (canvasElement[elmKey].left + canvasElement[elmKey].width) * ratioSize){ if(canvasElement[elmKey].top * ratioSize <= my && my <= (canvasElement[elmKey].top + canvasElement[elmKey].height) * ratioSize){ location.href = canvasElement[elmKey].href; } } } }); }); |
参考にさせていただいたサイト
HTML5 Canvasのクリック(Mousedown)を取得し、選択位置により処理を切り替える
↓円弧編はこちら
↓多角形編はこちら
Author Profile
SHARE
