• ベストアンサー

Canvasを使わずに直角三角形を描画できますか？

図のような図形の描画を、JavaScriptで描くには？ 条件は、 ・Vanilla JavaScriptのこと ・Canvasを不使用 ・ｓｖｇを不使用

画像を拡大する

質問者が選んだベストアンサー

  • ベストアンサー
回答No.4

<!DOCTYPE html> <meta charset="UTF-8"> <title></title> <style> .triangle { position: relative; } .triangle:after, .triangle:before { display: inline-block; border-style: solid; box-sizing: border-box; content: " "; position: absolute; } .triangle:before { width: 100px; height: 100px; border-width: 50px; border-color: transparent transparent black black; } .triangle:after { width: 97px; height: 97px; border-width: 48.5px; top: 2px; left: 1px; border-color: transparent transparent yellow yellow; } </style> <body> <div class="triangle"></div> <script> function demo () { let T = document.querySelector ('.triangle'), r = 100, {sin:s, cos:c, PI} = Math; T.style.position = 'absolute'; [...Array(120).keys()].forEach (i=>document.body.appendChild (T.cloneNode(false)). style.transform=`translate(${250+r*s(i*PI/60)}px,${100-r*c(i*PI/60)}px) rotate(${i*10}deg) scale(${1-i/120})`); } demo (); </script>

retorofan
質問者

お礼

素晴らしいです！ 私も疑似クラスで何とか できるのでは、と思案していました。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (3)

回答No.3

>「ブロックそのもの」とは？ たとえば、<p>なら、 <p>～</p>の間が表示物ですよね。 しかし、何も表示しないばあい、何も出ません。 だから、pそのものに色を付けます。 しかし、それでは、サイズ属性がないので、 widthとheightで大きさを指定して、強制的に このタグをブロックピースとして使うという具合です。 なお、位置指定は、絶対属性の頭に、相対属性をおいてください。 ＝なので、相対属性そのものにも、サイズを指定した方がいいでしょう。 それが、架空のキャンバスになりますので！ あとは、それを、JavaScriptでDOM構成すれば、 Canvasなしで、絵を描けますが。 DOMなので、「絵」ではないため、消す方法がない問題があり、 チャイルドノードを丸ごと消すか、 data-x=123 data-y=123などで、座標を書いておいて、 それを探して消すなど、消去する方法が必要にはなります。 （今回そこまでは、いらない気はするので、大丈夫でしょうが）

全文を見る
すると、全ての回答が全文表示されます。
回答No.2

塗色はどういうコードで可能でしょうか？ background-color:XXX; これで行きます。 サイズだけで、表示物があるわけではないので、 ブロックそのものに色を付けることで、 カラードットを再現！

retorofan
質問者

お礼

ご回答ありがとうございます。 「ブロックそのもの」とは？ 具体的に教えてください。

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

であれば、CSSでabsoluteのwidth:1px;height:1pxのパーツを 動的に作り出せる関数を用意。 あとは、計算に合わせてプロットする。 これで、Canvasなしで、絵を描くことができます。 ただし、原理的にDOM構築なため、速度的には 問題はあるものの、要件定義は満たせます。

retorofan
質問者

お礼

ご回答ありがとうございます。 塗色はどういうコードで可能でしょうか？

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 描画キャンバスについて

    描画キャンバスについて質問します。地図を作ったりするのに使いますが、丸や三角、四角の図形を挿入すると、中央に大きく挿入されてしまいます。また直線を挿入して幅を広げて色を変えようとするとキャンバスの枠線が変わってしまいます。テキストボックスもキャンバスからはみ出したりする事もあります。故障でしょうか？大変困っています。いろいろと教えてください。 ※OKWAVEより補足：「Lenovo：その他(デジタルライフ)」についての質問です。

  • 描画キャンパス

    ワード２００７ですが、描画キャンパスが出せません。 ヘルプに示された手順は 描画キャンバスを挿入します。[挿入] タブの [図] で [図形] をクリックし、[新しい描画キャンバス] をクリックします。 ですが、挿入タブの図をクリックすると　マイピクチャーがポップアップします。又図形をクリックすると基本図形　その他が表示されます。 ヘルプで言う　[図] で [図形] をクリックし　とは何なのかわかりません。 ご指導お願いいたします。

  • ワードの描画キャンバスの使い方

    テキストを見ながらワード２００３を勉強しているのですが、テキスト通りにならなくて困っています。 １ページ目の後半に描画キャンバスを使い、図を描き、大きすぎるので２ページ目に作成されます。 最後に描画キャンバスごと１ページに持っていくときに[描画キャンバス]ツールバーの「描画に合わせる」をクリックすると１度絵が消えて、１ページに持っていけると書いてあるのですが、クリックしても絵が消えません。ドラッグで１ページに持って行ったりもしましたが、うまく収まりませんでした。 テキストもあまり詳しく書かれていないので、使い方がよくわかりません。教えてください。よろしくお願いします。

  • ワードの描画キャンバスの移動について

    ワード２００７を使用してます。 図形描画キャンバスを移動する際、テキストの折り返しとかを設定して、移動事態はうまくいくのですが、前キャンバスがあった場所に、点線が残像として残ります。これは消せるのでしょうか？ よろしくお願いします。

  • 描画キャンバス内に書かれた図形から描画キャンバスをはずしたい

    ワード2003です 表の中に描画キャンバスでワードアート、テキストボックス等を描いた文書が知人から送られてきました 描画キャンバスを削除したいのですがクリックしても描かれたワードアートやテキストボックスが選択されて描画キャンバスが選択できませんので描画キャンバスが削除できません ワードアートやテキストボックスを活かして描画キャンバスだけを削除する方法がありますか教えてください

  • EXCELでも、WORD描画キャンバスのように・・

    EXCELでも、WORD描画キャンバスのように、複数図形をまとめて配置／移動できないでしょうか？ EXCEL2010を使用しています。 御存じのように、WORD2010のような「描画キャンバス」は、EXCEL側には用意されていません。 私は、ＷＯＲＤでは「描画キャンバス」を、複数図形をまとめて乗っけて、そのなかで選択・配置したり、全部まとめて動かせる、お盆（トレー）のようなものとして使用しています。 それと同様の事をEXCELでやろうとする時は、ふつうは たぶん以下の操作になるかと思います。 図形（オートシェイプ）で大きな透明な四角形（正方形／長方形）を作り ↓ その上に、複数の細かい図形を置き、個々に選択し、適当な位置に配置 ↓ 全体を移動したいときには、全部の図形を選択してそれを”グループ化”する。 ↓ グループ全体を選択して、移動する ↓ その後、個々の細かい図形を選択したいときには、 一旦、”グループ解除”を行って、それから個々の細かい図形を選択。 （※そのまま選択するとグループ全体の選択になってしまうので） さて、この手順を見ますと、 細かい図形を全部まとめて一気に移動したり、 細かい図形を個々に選択して操作したり、するには 毎回、いちいち「”グループ化”、”グループ解除”」の手間 が伴っております。 WORDの「描画キャンバス」では、同様のことをするのに いちいち”グループ化”、”グループ解除”は必要ありません ＥＸＣＥＬででも この いちいち”グループ化”、”グループ解除”の 手間を省いてやる方法は 無いものでしょうか？ 御指南、よろしくお願いいたします。

  • クリップアートを描画キャンバスから取り出したい

    Word2003です 描画キャンバスの中のクリップアートの図形を取り出したいのですが よろしく御願いします。

  • 描画するときの画像の色を変えたい

    こんにちは。 html5でcanvasに画像を描画しているのですが、この時に画像の色調を変える方法はありますでしょうか？ 画像はアルファ付きのpngで、周囲が透明の白い図形です。 この図形を例えば青っぽく描画したり、赤っぽく描画したりしたいのですが、javascriptで可能でしょうか？

  • HTML5のcanvasで描画がされない

    HTML5のcanvas要素を使って描画をしようとしたのですが、図形が表示されません。 コードは以下の通りです。 ・index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvasで図形を描く</title> <script type="text/javascript" src="paint.js"></script> </head> <body onLoad="draw()"> <canvas id="mycanvas"width="800" height"800"> </canvas> </body> </html> ・paint.js function draw() { //描画コンテキストの取得 var canvas = document.getElementById('mycanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.arc(180,150,20,Math.PI*1,Math.PI*2,true); } } このコードでは(180,150)の位置に半径20の円が描画されるはずなのですが、何も表示されませんでした。 どこかコードに誤りがあるのでしょうか？ よろしくお願いします。

  • WORD 描画キャンバスにブックマーク

    WORD 描画キャンバスにブックマーク WORDの描画キャンパスに図を書き、キャンバスにブックマークをして、別なところにフィールドで再表示したいと思っております。 しかし、フィールドで表示するとそのキャンバスの大きさは表示されるのですが、中身は表示されません。 描画キャンパスにブックマークしても意味がないのでしょうか？それとも、どこか設定をいじれば出てくるものなのでしょうか？ どなたかご存じな方がいらっしゃいましたら教えてください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する