- ベストアンサー
canvasで手軽に図形を描く方法
- canvasで簡単に図形を描く方法をご紹介します。
- JavaScriptのコードを手書きすることなく、GUIツールを使用して図形を描くことができます。
- 絵を描く際に必要なコードの手間を省き、簡単に図形を作成できます。
- pringlez
- お礼率99% (2353/2375)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ツールで描画したものをJavaScriptのコードに変換するツール、ということですね。 Canvas Designerというのがあります。高度な描画機能まではないようですが、基本図形を組み合わせる形ならばこれでコード生成できそうです。 ※ちなみに、質問にあったjsdo.itのサンプルですが、これこそ「すべてを手書きで」書かないと実現できないものばかりだと思いますよ。ツールで描ける図形なんてたかがしれてます。コードで生成するほうが、はるかに複雑で高度な表現が可能です。
その他の回答 (4)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
ブラウザ上で画像を作成する物ではありませんが、SVGファイルをcanvas上に描画するライブラリもあります。 SVGファイルの作成はIllustratorやEdgeが使われる事が多いと思います。 ご参考まで。 https://code.google.com/p/canvg/ http://fabricjs.com/
お礼
ありがとうございました
補足
私の質問は画像ファイルの作成でも、画像ファイルをcanvasに表示する方法でもないのです…。 まず、画像ではないのです。また、図形の画像でもないのです。 canvasで図形を描画するためのJavaScriptのコードの話で、図形を描くJavaScriptのコードを自動作成できる機能やツールを求めているのです。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
Javaでは、しぃペインターという動作履歴を全て保存して、後から動画として再生できる物もあるのですが、 すみませんが、JavaScriptでは知らないです。 PNGで保存できるものや、 オリジナルの形式で保存する物（サイトにログインして再編集できるもの）であればかなり多いですが、 No.2のサイトを確認してみましたが、このような画像描画用のデータを配布しているものは見ないです。
お礼
ありがとうございました
補足
質問がわかりにくかったのかもしれませんね。すみません。 私の質問は、canvasで図形を描画するためのJavaScriptのコードを自動作成できる機能やツールです。 そのツールがどんな言語で作成されたかは特に問いません。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>No.1、No.2 たとえば、Photoshopをマウスで操作して図形を描くのと、 Photoshopで図形を描く自動処理をさせる事は全く別物な訳ですが、 どちらを行いたいのでしょうか。 お絵描きソフトを作るのではなく、 既製品のお絵描きソフトを探しているというのであれば、例えばこういうまとめサイトなど。 （JavaScript、Javaアプレット混在。JavaScriptの方はcanvasとSVGが混在しているかもしれません。） http://matome.naver.jp/odai/2137859341187720201
お礼
ありがとうございました
補足
>たとえば、Photoshopをマウスで操作して図形を描くのと、 >Photoshopで図形を描く自動処理をさせる事は >全く別物な訳ですが、どちらを行いたいのでしょうか。 どちらでもありませんよ。Photoshopは関係ありません。また、「お絵描きソフトを作りたい」のでもなく「既製品のお絵描きソフトを探している」わけでもありませんよ。 質問はcanvasの話なんですけど…。別の質問と間違えて回答していませんか？ 「canvasで図形を描画」というのは例えば以下のようなコードのことです。 <canvas id="canvas" style="background-color:yellow;"></canvas> <script type="text/javascript"> var context = document.getElementById("canvas").getContext("2d"); context.fillRect(30, 30, 100, 100); context.fill(); </script> このときのJavaScriptのコードについて形状・位置・サイズ・色などの値等をハンドコーディングで指定するのではなく、イメージをGUIで描画するとJavaScriptのコードを自動作成できる機能があるソフトやWebサービスを求めているという事です。 例えばNo.2さんのご提示のサイトは、私のニーズを満たしています。 そのような観点で、もし何か情報をご存知ならよろしくお願いします。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
Photoshopなどで画像を作成したものを var img = document.createElement('img'); img.src=画像のURL で読み込み、 .drawImage(img) でcanvasに描画できます。
お礼
それは「図形の描画」ではなく、「画像の表示」ですよね… ありがとうございました
お礼
>Canvas Designerというのがあります おお。やっぱりあるんですね。図形データを配列で書き出す仕様に少し違和感を感じますけど、想像しながら数字を書くよりずっといいですね。 >jsdo.itのサンプルですが、これこそ「すべてを手書きで」 >書かないと実現できないものばかりだと思いますよ そうですか。ああいうコードを書くにはちょっと特殊な知識が必要そうですね。 参考になりました。 ありがとうございました
補足
「図形データを配列で書き出す仕様に少し違和感を感じますけど」と書きましたが、「shorten code」のチェックをはずせば、普通っぽいコードに近づくことがわかりました。strokeOrFillもなくしたいところですがそこは手作業で何とかします。