前回、HTML5のCanvasにおいて、矩形でレスポシンシブに対応したリンクをつける方法をご紹介いたしましたが(→前回の記事)、
今回は、円弧でレスポンシブに対応したリンクをつける方法をご紹介いたします。

↓こちらがDEMOです。

DEMO

方法

 1.Canvasの準備をする。

こちらは前回の方法と同じで、HTMLとCSSで、

960px以下でCanvasの大きさが画面サイズに合わせて変化するようにします。

HTML5

<div class="wrapper"> <canvas id="visual" width="900" height="400"></canvas> </div>

1 2 3

<div class="wrapper"> <canvas id="visual" width="900" height="400"></canvas> </div>

 

CSS3

CSS

.wrapper{ width: 960px; padding: 30px; margin: 0 auto; } @media only screen and (max-width: 960px){ .wrapper{ width: auto; padding: 10px; } canvas{ width: 100%; } }

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.描画、リンクさせる要素の設定をする。

矩形のときはwidthとheightを設定しましたが、今回は円弧ですので、代わりにradius(半径)を設定します。

JavaScript

JavaScript

$(function(){ //canvasに描画する円弧の設定 var canvasElement = { elm1 : { left : 200, //円弧中心の左位置 top : 50, //円弧中心の上位置 radius : 30, //円弧の半径 color : "#f89aba", //円弧の色 href : "#elm1" //リンク先 }, elm2 : { left : 500, top : 100, radius : 60, color : "#85b3f7", href : "#elm2" }, elm3 : { left : 350, top : 250, radius : 90, color : "#add269", href : "#elm3" } }; ・・・

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

$(function(){   //canvasに描画する円弧の設定 var canvasElement = { elm1 : { left : 200, //円弧中心の左位置 top : 50, //円弧中心の上位置 radius : 30, //円弧の半径 color : "#f89aba", //円弧の色 href : "#elm1" //リンク先 }, elm2 : { left : 500, top : 100, radius : 60, color : "#85b3f7", href : "#elm2" }, elm3 : { left : 350, top : 250, radius : 90, color : "#add269", href : "#elm3" } };   ・・・

 

 3.円弧を描画する

JavaScript

JavaScript

・・・ //canvasの描画 var canvas = document.getElementById("visual"); if(canvas.getContext){ var ctx = canvas.getContext('2d'); for(elmKey in canvasElement){ //設定した要素の数だけ繰り返す ctx.beginPath(); //パスの設定を開始 ctx.fillStyle = canvasElement[elmKey].color; //色の設定 ctx.arc(canvasElement[elmKey].left, canvasElement[elmKey].top, canvasElement[elmKey].radius, 0, Math.PI*2, false); //円弧の描画 ctx.fill(); //円弧の塗りつぶし } } ・・・

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

・・・   //canvasの描画 var canvas = document.getElementById("visual"); if(canvas.getContext){   var ctx = canvas.getContext('2d'); for(elmKey in canvasElement){ //設定した要素の数だけ繰り返す   ctx.beginPath(); //パスの設定を開始 ctx.fillStyle = canvasElement[elmKey].color; //色の設定 ctx.arc(canvasElement[elmKey].left, canvasElement[elmKey].top, canvasElement[elmKey].radius, 0, Math.PI*2, false); //円弧の描画 ctx.fill(); //円弧の塗りつぶし }   }   ・・・

2で設定した値をもとに、円弧を描画します。

FOR IN文を使って、設定した1階層目のプロパティの数繰り返すようにします。

.beginPath() でパスの描画を開始,

.fillStyle で塗りつぶす色を設定(設定方法はCSSと同じです)

.arc([左からの位置], [上からの位置], [円弧の半径], [円弧の開始角], [円弧の終了角], [円弧の描画方向(falseだと時計回り、trueだと反時計回り)]) で円の描画設定

.fill() で塗りつぶしの描画

を行います。

 

4. リンクの設定と実行

JavaScript

JavaScript

・・・ /*---------------------- canvasのクリックの設定 ----------------------*/ //canvasの基準になる大きさ(width属性で設定した値)を取得 var canvasBaseWidth = $("canvas").attr("width"); $("canvas").click(function(e){ var canvasWidth = $("canvas").width(); //canvasをクリックした時点での、canvasの大きさを取得 var ratioSize = canvasWidth / canvasBaseWidth; //縮小率を計算 //マウス情報の取得と設定 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) * (canvasElement[elmKey].left * ratioSize - mx) + (canvasElement[elmKey].top * ratioSize - my) * (canvasElement[elmKey].top * ratioSize - my) <= (canvasElement[elmKey].radius * ratioSize) * (canvasElement[elmKey].radius * ratioSize)){ location.href = canvasElement[elmKey].href; } } }); });

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

・・・   /*---------------------- canvasのクリックの設定 ----------------------*/   //canvasの基準になる大きさ(width属性で設定した値)を取得 var canvasBaseWidth = $("canvas").attr("width");   $("canvas").click(function(e){ var canvasWidth = $("canvas").width(); //canvasをクリックした時点での、canvasの大きさを取得 var ratioSize = canvasWidth / canvasBaseWidth; //縮小率を計算   //マウス情報の取得と設定 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) * (canvasElement[elmKey].left * ratioSize - mx) + (canvasElement[elmKey].top * ratioSize - my) * (canvasElement[elmKey].top * ratioSize - my) <= (canvasElement[elmKey].radius * ratioSize) * (canvasElement[elmKey].radius * ratioSize)){ location.href = canvasElement[elmKey].href; } } });   });

リンクの設定手順は次の通りです。

1. Canvasの元の大きさ(htmlのwidth属性で設定した値)を取得しておく
2. Canvas上でクリックしたときに、クリック時の実際のCanvasサイズを取得し、元の大きさからの縮小率を計算
3. Canvas上のマウスの位置を取得
4. 始めに設定した円弧の位置とクリックした位置が一致する場合、設定したリンクに移動

4の円弧とクリックした場所の一致は、

円弧の中心の位置を(cx, cy)、円弧の半径をcr、クリックした位置を(mx, my)、縮小率をsとした場合、

if((cx *s – mx)*(cx *s – mx) + (cy *s – my)*(cy *s – my) <= (cr *s )*(cr *s)){

円弧とクリックした位置がエッチする場合に実行するコード

}

で判定できます。

↓当たり判定の参考サイト

当たり判定

 

正確に円に沿ったリンクを貼ることができるのがいいと思いました。

 

その他参考サイト

さまざまな図形を描く

 

↓矩形(四角)編はこちら

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

↓多角形編はこちら

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