- ベストアンサー
JavaScriptで方眼（紙）を描けますか？
Canvasで方眼（紙）を描きました。（添付画像） これと同じように、Canvasを用いないで JavaScriptだけで方眼（紙）を描けますか？ できるなら、図と同じに描けるコードはどうなりますか？ 詳しい方のご教示、よろしくお願いいたします。
- retorofan
- お礼率86% (336/388)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
文字は適当にかぶせてね <!DOCTYPE html> <meta charset="UTF-8"> <title></title> <style> #HG { border-collapse:collapse; border: 2px solid #04c; } #HG td { border: 1px solid rgba(0,100,200,.2); width:2px; height:2px; } #HG td:nth-of-type(5n) { border-right: 1px solid rgba(0,100,200,.4);} #HG tr:nth-of-type(5n) td { border-bottom: 1px solid rgba(0,100,200,.4);} #HG td:nth-of-type(60) { border-right: 1px solid rgba(0,100,200,.8);} #HG tr:nth-of-type(60) td { border-bottom: 1px solid rgba(0,100,200,.8);} </style> <body> <table id="HG"></table> <script> ((a,b)=>a.reduce((b,a)=>(a.reduce((c,d)=>(c.insertCell().append(d),c),b.insertRow()),b),b)) ([...Array(120)].map(a=>[...Array(120)].map(_=>'')), HG) </script>
その他の回答 (2)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
結局、絵ってのは、「点」の集合体なので、 1ドットを永遠にノード追加していけばいつかは、 こうなりますが。 非ビットマップでそれをやると、クソ遅くなるだけですが。 やれるか？だけなら、YESですね。
お礼
ご回答ありがとうございます。
- hirohashiba
- ベストアンサー率24% (43/174)
>これと同じように、Canvasを用いないでJavaScriptだけで方眼（紙）を描けますか？ 無理です。 javascriptを使ったとしても、ブラウザ上にで表示するときは最終的にはHTML(含むsvg，canvas）とCSSと画像しかできないため。
お礼
ご回答ありがとうございます。
お礼
ご回答ありがとうございます。 見事に実現出来ています！ どうもありがとうございました。