Q&A
回答、ありがとうございます！こちらで解決することができました！！
基本的なことに気がつけてなくて、お恥ずかしい限りです…
xとyの位置をしっかり指定すること、教訓になりました。
ありがとうございます！！
お世話になります。
当方、jsの知識がなく、解決策をお尋ねしたいです。
LPの作成の依頼で、デザインの一部に以下のような例がありました。
こちらを実現したくて、色々ググった結果、canvasを使って、要素間の点線を書くと言う方法で実現できると思い、
練習でこのようなコードを書きました。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>サンプル</title> 6 7 <style> 8 #myCanvas { 9 position: absolute; 10 left: 0px; 11 top: 0px; 12 } 13 14 #doko { 15 position: absolute; 16 left: 50px; 17 top: 100px; 18 width: 150px; 19 height: 50px; 20 line-height: 50px; 21 display: block; 22 width: 200px; 23 height: 100px; 24 border: 2px solid #000; 25 color: yellow; 26 font-size: 20px; 27 text-align: center; 28 background-color: rgba(20,20,200,0.5); 29 } 30 31 #koko { 32 position: absolute; 33 left: 550px; 34 top: 200px; 35 width: 150px; 36 height: 50px; 37 line-height: 50px; 38 display: block; 39 width: 200px; 40 height: 100px; 41 border: 2px solid #000; 42 color: red; 43 font-size: 20px; 44 font-weight:bold; 45 text-align: center; 46 background-color: rgba(20,150,100,0.5); 47 } 48 </style> 49 50 <script> 51 (function() { 52 function drawLine() { 53 var canvas = document.getElementById("myCanvas"); 54 55 if (!canvas || !canvas.getContext) { 56 return false; 57 } 58 59 var ctx = canvas.getContext("2d"); 60 61 var a = document.getElementById("doko").getBoundingClientRect(); 62 var b = (a.bottom - a.top) /2; 63 var c = (a.right - a.left) /2; 64 var d = a.top+b; 65 var e = a.left+c; 66 67 var kokoda = document.getElementById("koko").getBoundingClientRect(); 68 var tate = (kokoda.bottom - kokoda.top)/2; 69 var yoko = (kokoda.right - kokoda.left)/2; 70 var tatehalf =kokoda.top+tate; 71 var yokohalf =kokoda.left+yoko; 72 73 ctx.strokeStyle = "#ffba00"; 74 ctx.lineWidth = 5; 75 ctx.beginPath(); 76 ctx.moveTo(d,e); 77 ctx.lineTo(tatehalf,yokohalf); 78 ctx.setLineDash([5, 10]); 79 ctx.closePath(); 80 ctx.stroke(); 81 } 82 83 onload = drawLine; 84 })(); 85 </script> 86</head> 87 88<body> 89 <h3>div要素間で点線を引く！</h3> 90 <div id="doko">お〜い！<br>(ﾟДﾟ≡ﾟДﾟ)ﾄﾞｺﾄﾞｺ?</div> 91 <canvas id="myCanvas" width="1550" height="1550"></canvas> 92 <div id="koko">俺は…<br>ここだ！!( ﾟдﾟ )</div> 93</body> 94 95</html> 96
この結果が下記のような図になりました。
やりたいことは、要素の中心同士で点線を結びたいのですが、
document.getElementById("xxxx").getBoundingClientRect();
で、要素の座標を取得できると分かったのですが、二つ目の"koko"と言う要素がうまく中心を捉えてくれません。
一つ目と同じように指定したつもりではあるのですが、書き方のルールがおかしいのだと思います。
どのように書いたらよろしいでしょうか？
ちなみにこの方法なら、レスポンシブ対応は問題ないでしょうか？
ご教授いただけると幸いです。
よろしくお願いいたします。
回答2件
0
ちなみにこの方法なら、レスポンシブ対応は問題ないでしょうか？
canvasで線を引くということ自体に問題はないはずです。
ただ、値やスマホのような端末幅が狭いときはどうするかは別途考える必要があります。
投稿2020/07/28 02:16
総合スコア10429
0
ベストアンサー
投稿2020/07/28 02:06
総合スコア306
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/28 02:33