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に文字列を書く:メモに置いてあります。
| 固定リンク