- ベストアンサー
canvasで手軽に図形を描く方法
- canvasで簡単に図形を描く方法をご紹介します。
- JavaScriptのコードを手書きすることなく、GUIツールを使用して図形を描くことができます。
- 絵を描く際に必要なコードの手間を省き、簡単に図形を作成できます。
- みんなの回答 (5)
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (4)
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2281)
関連するQ&A
- Canvas等の図形を移動する時,直前のその図形のみを削除する方法
Canvas等で描画された図形を十字キー操作で移動する時,プログラムの処理(負担)を減らすために,Canvas等に描かれている全図形を再描画するのではなく,移動するその図形"だけ"を再描画しつつ,移動させたいのです. そのためには,どのような事をしなければならないのでしょうか? アドバイスを宜しくお願いします. 例: Canvas上のある所に○を描くとします.これをキーボードの↑↓←→キーに合わせて,移動させたいのです. しかし,私のプログラムでは,上記のプログラムは大体出来ているのですが,以下の不満があります. Canvas上には,上記の○以外にも,△や□等が散らばって描画されていますので,○の移動毎に,Canvas上の全図形を再描画しています。これで,Canvas上で変更点がない図形も再描画され,処理的に無駄を感じていますので,○だけについて,移動を表現する描画をしつつ,移動前の○図形を削除したいのです. また,GraphicsのclearRect(x,y,width,height)メソッドで,移動直前の○を消せばよいと思ったのですが,これを使用した場合,図形○に図形△が少しでも重なっていた場合,○だけでなく△の図形も一部消されてしまい上手くいきません. ○をCanvas上に描いたGraphicsインスタンスを記憶しておく事は出来るのでしょうか? 出来るのであれば,そのインスタンスから自分が描画した図形○を消す事で,○だけを削除できる...かな....と思っています.... 上記の私の要望が満たされるのであれば,CanvasやGraphicsの範囲外の手法で全くかまいませんので,是非アドバイスを宜しくお願いします。 参考URLもご提示いただければ,なお有難いです.
- ベストアンサー
- Java
- 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の円が描画されるはずなのですが、何も表示されませんでした。 どこかコードに誤りがあるのでしょうか? よろしくお願いします。
- 締切済み
- HTML
- Canvasを使わずに直角三角形を描画できますか?
図のような図形の描画を、JavaScriptで描くには? 条件は、 ・Vanilla JavaScriptのこと ・Canvasを不使用 ・svgを不使用
- ベストアンサー
- JavaScript
- html5canvasの文字枠のずれ
html5のcanvasで、枠付きの文字列を描画しようとしたら、表示がおかしくなったのですが、理由がわかりません。ブラウザはchromeです。 一部のフォントとサイズのときだけ起きるのですが、それ以外で作れば問題ないのでしょうか。 <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); ctx.lineWidth=2; ctx.font = "bold 22px 'MS P明朝'" ctx.strokeStyle = 'rgba(255, 0, 0, 1)'; ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.strokeText("aa0.3", 10, 25); ctx.fillText("aa0.3", 10, 25); </script>
- ベストアンサー
- JavaScript
- ドラッグして描画図形を拡大縮小する方法
マウスで選択すると、その選択した描画図形が拡大縮小するという方法を教えてほしいです。図形は、Canvasで描いています。お願いします。
- 締切済み
- C・C++・C#
- Word 2003 描画キャンバスと定型句やクリップアートに保存
(1) Word 2003 に、オートシェイプで作成した図形をクリップアートに保存したい。どうしたらいいですか? (2) Word 2003 に、オートシェイプで作成した図形を定型句に保存したい。しかし描画キャンバスに描いた複数の図形すべてが登録されてしまう。私が保存したいのはそのうちひとつの図形だけです。どうしたらいいですか?グループ化解除しか方法はないですか?
- ベストアンサー
- その他MS Office製品
- 多数の図形の一括選択と描画キャンバスの左端位置変更
Word 2010です。 (1) 多数の図形全部を一括して(つまり、1度のクリックで)選択するには、次の(a)のようにするとできます。 (a)描画キャンバス内にその多数の図形を入れて、「オブジェクトの選択」の矢印で、その多数の図形全部を含むように四角を描く(つまり、範囲指定する)。 多数の図形全部を一括して(つまり、1度のクリックで)選択する方法は、(a)以外にありますか。 (2) 文字入力領域の左端から描画キャンバスの左端を引き離すにはどうしたらいいでしょうか。つまり、文字入力領域の左端と描画キャンバスの左端との間に文字を入力するにはどうしたらいいでしょうか。 ※つまり、次の(a)と(b)の両方をしたいんです。 (a)多数の図形全部を一括して(つまり、1度のクリックで)選択する。 (b)その多数の図形の左側に文章を入れる。 Word 2003では簡単にできていたのですが.....。
- ベストアンサー
- その他MS Office製品
- 描画するときの画像の色を変えたい
こんにちは。 html5でcanvasに画像を描画しているのですが、この時に画像の色調を変える方法はありますでしょうか? 画像はアルファ付きのpngで、周囲が透明の白い図形です。 この図形を例えば青っぽく描画したり、赤っぽく描画したりしたいのですが、javascriptで可能でしょうか?
- 締切済み
- JavaScript
- EXCELでも、WORD描画キャンバスのように・・
EXCELでも、WORD描画キャンバスのように、複数図形をまとめて配置/移動できないでしょうか? EXCEL2010を使用しています。 御存じのように、WORD2010のような「描画キャンバス」は、EXCEL側には用意されていません。 私は、WORDでは「描画キャンバス」を、複数図形をまとめて乗っけて、そのなかで選択・配置したり、全部まとめて動かせる、お盆(トレー)のようなものとして使用しています。 それと同様の事をEXCELでやろうとする時は、ふつうは たぶん以下の操作になるかと思います。 図形(オートシェイプ)で大きな透明な四角形(正方形/長方形)を作り ↓ その上に、複数の細かい図形を置き、個々に選択し、適当な位置に配置 ↓ 全体を移動したいときには、全部の図形を選択してそれを”グループ化”する。 ↓ グループ全体を選択して、移動する ↓ その後、個々の細かい図形を選択したいときには、 一旦、”グループ解除”を行って、それから個々の細かい図形を選択。 (※そのまま選択するとグループ全体の選択になってしまうので) さて、この手順を見ますと、 細かい図形を全部まとめて一気に移動したり、 細かい図形を個々に選択して操作したり、するには 毎回、いちいち「”グループ化”、”グループ解除”」の手間 が伴っております。 WORDの「描画キャンバス」では、同様のことをするのに いちいち”グループ化”、”グループ解除”は必要ありません EXCELででも この いちいち”グループ化”、”グループ解除”の 手間を省いてやる方法は 無いものでしょうか? 御指南、よろしくお願いいたします。
- ベストアンサー
- Excel(エクセル)
- office2007図形グループ化方法
office2007図形グループ化方法 ◇使用機器 win7 Office2007 ◇教えて戴きたい内容 ■前提 Office2007エクセルで作成した文書をプリントスクリーンして、一旦Jtrimにコピーした後、ワードに貼り付けました(これを1とします)。然る後この文書に「図形」の、四角(テキストの追加)、矢印等を使い説明書きを挿入しました(これを2とします)。 1と2のグループ化を試みましたところ2で作成した複数の図形はグループが出来て一個の塊になりましたが(これを3とします)、1と3がグループ出来ません。移動すると片方が残ります。 ■教えて戴きたい内容 上記1・2・3をグループ化する操作方法 ■コメント 私の行った操作方法は次の通りです 1と2をホーム→選択→オブジェクトの選択(矢印マーク)で全体を選択→書式→グループ化しました。 上記操作の際、「挿入」→「図形」→「新しい描画キャンバス」から描画キャンバスを画面全体に表示して、その中でグループ化の操作しても、キャンバスを表示させないでグループ化しても結果は同じでした。(1と3はグループ化出来ませんでした)
- ベストアンサー
- その他MS Office製品
お礼
>Canvas Designerというのがあります おお。やっぱりあるんですね。図形データを配列で書き出す仕様に少し違和感を感じますけど、想像しながら数字を書くよりずっといいですね。 >jsdo.itのサンプルですが、これこそ「すべてを手書きで」 >書かないと実現できないものばかりだと思いますよ そうですか。ああいうコードを書くにはちょっと特殊な知識が必要そうですね。 参考になりました。 ありがとうございました
補足
「図形データを配列で書き出す仕様に少し違和感を感じますけど」と書きましたが、「shorten code」のチェックをはずせば、普通っぽいコードに近づくことがわかりました。strokeOrFillもなくしたいところですがそこは手作業で何とかします。