canvas上にHTML要素を置く:JavaScriptメモ

メモです

 canvasにHTML要素を重ねる

canvasはインタラクティブ要素が完璧に欠落しています。それはもう見事な 思い切りの良さです。しかし、実用的ではありません。

リンクやボタンなどのインタラクティブ要素を持ち込むには通常 HTML要素をDOMで張り付けることになります。

ここでは<A>タグを張り付けてみました。
リンク先は下のサンプルコードです。

次のコードでcanvas上の計算で得た位置に<a>タグを出力しています。

<!--[if lt IE 9]>
<script type="text/javascript" src="../../../js/excanvas.js"></script>
<![endif]-->
<div id="area" style="position:relative">
<canvas id="canvas1" width="480" height="400" ></canvas>
</div>
</p>
<script type="text/javascript">
var names=["東京","名古屋","大阪","京都","高知","神戸","横浜"
          ,"福岡","札幌","New York","London","Paris","Salzburg"];
var ring ={x:240,y:200,radius:170};
var block={width:80,height:30};
function draw(){
   var area= document.getElementById("area");
   while(true){ // <A要素のクリア
      var elms= document.getElementsByName("text_disp");
      if( elms.length==0 ) break;
      area.removeChild(elms[0]);
      }
   var n= Math.floor(Math.random()*(names.length-2)+2);
   var s= Math.floor(Math.random()*names.length%n);
   var canvas = document.getElementById('canvas1');
   var context= canvas.getContext('2d');
   context.save();  // おまじない
   context.clearRect(0,0,canvas.width,canvas.height);
   context.beginPath();
   context.arc(ring.x, ring.y, ring.radius, 0, Math.PI*2, false);
   context.lineWidth=4;
   context.strokeStyle = 'blue';
   context.stroke();
   context.lineWidth=1;
   context.strokeStyle = 'black';
   for(var i=0;i<n;++i){
      var nidx= (s+i+names.length)%names.length;
      var r= Math.PI*2/n*i;
      var x= Math.cos(r);
      var y= Math.sin(r);
      context.beginPath();
      context.rect(ring.x-ring.radius*x-block.width/2
                  ,ring.y-ring.radius*y-block.height/2
                  ,block.width,block.height);
      if( nidx==0 ) context.fillStyle = 'lightgreen';
      else          context.fillStyle = 'yellow';
      context.fill();
      context.stroke();
      var a= document.createElement("A");
      area.appendChild(a);
      var tx= ring.x-ring.radius*x-block.width/2+6;
      var ty= ring.y-ring.radius*y-7;
      a.style.position   = "absolute";         // relativeの中のabsolute
      a.style.left       = Math.floor(tx)+"px";// 整数化：必須ではない
      a.style.top        = Math.floor(ty)+"px";
      a.name             = "text_disp";// ひとまとめでクリアするための名
      a.href             = "#sample";  // リンク先
      a.className        = "A1";       // A1は本ブログでの標準クラス
      a.style.fontFamily = "Arial"; 
      a.style.fontSize   = "12px";
      if( nidx==4 ) a.style.color="#ff0000";
      a.appendChild(document.createTextNode(names[nidx]));
      }
   context_.restore();  // おまじない
   }
function start(){
   draw();
   setInterval(draw,3000);
   }
try{ // load完了で関数呼び出し
   window.addEventListener("load",start,false);
   }
catch(e){
   window.attachEvent("onload",start);
   }
</script>

ほぼ同じ構成でcanvasの文字列表示機能を使って文字列を表示するだけのサンプルを canvasに文字列を書く：メモに置いてあります。