JavaScript

jQueryのプラグイン「jCanvas」で間取図を作成

HTML5のCanvasを使ってやりたい事があったので、

本日はjQueryのプラグイン「jCanvas」を試してみました。

取りあえず、

今回はjCanvasを試してみたかっただけなので、

不動産の「間取り図」を描いてみることにしました。

 

まず、

jQueryのライブラリー本体とjCanvasを読み込みます。

今回はCDNにホストされているURLから読み込むことにしたので、

以下の2行を<head>~</head>内に追加するだけです。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>

もし、

ライブラリーを自分のサーバにアップして読み込む場合には、

https://projects.calebevans.me/jcanvas/downloads/

からダウンロードして下さい。

 

読み込みの設定が完了したら、

以下の順番でコードを書いていきます。

①、drawRectで長方形を描く

②、drawLineで線を描く

③、drawTextで文字を書く

 

コードは以下の様になります。

【①、drawRectで長方形を描く】

$("canvas").drawRect({
  strokeStyle:"black",
  strokeWidth:1,
  fillStyle:"#ffffff", //図形を白色で塗りつぶす
  x:75,
  y:100,
  width:150,
  height:200
});

【②、drawLineで線を描く】

$("canvas").drawLine({
  strokeStyle:"black",
  strokeWidth:1,
  x1:0,
  y1:150,
  x2:100,
  y2:150
});

※このdrawLineを複数回使って線を引いていきます。

【③、drawTextで文字を書く】

$("canvas").drawText({ //テキストを表示
  fillStyle:"black",
  strokeStyle:"black",
  strokeWidth:"0.3",
  x:75,
  y:100,
  fontSize:20,
  fontFamily:"sans-serif",
  text:"和室6帖"
});

 

HTMLも含めてコードをまとめると、

以下の様になります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>図面サンプル</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
</head>
<body>

<canvas width="150" height="200" style="margin:0px;padding:0px;"></canvas>

<script>
$("canvas").drawRect({ //長方形を描画
  strokeStyle:"black",
  strokeWidth:1,
  fillStyle:"#ffffff", //図形を白色で塗りつぶす
  x:75,
  y:100,
  width:150,
  height:200
}).drawLine({ //横線を描画
  strokeStyle:"black",
  strokeWidth:1,
  x1:0,
  y1:50,
  x2:100,
  y2:50
}).drawLine({ //横線を描画
  strokeStyle:"black",
  strokeWidth:1,
  x1:0,
  y1:150,
  x2:100,
  y2:150
}).drawLine({ //横線を描画
  strokeStyle:"black",
  strokeWidth:1,
  x1:100,
  y1:100,
  x2:150,
  y2:100
}).drawLine({ //縦線を描画
  strokeStyle:"black",
  strokeWidth:1,
  x1:50,
  y1:50,
  x2:50,
  y2:150
}).drawLine({ //縦線を描画
  strokeStyle:"black",
  strokeWidth:1,
  x1:100,
  y1:0,
  x2:100,
  y2:200
}).drawText({ //テキストを表示
  fillStyle:"black",
  strokeStyle:"black",
  strokeWidth:"0.3",
  x:75,
  y:100,
  fontSize:20,
  fontFamily:"sans-serif",
  text:"和室6帖"
});
</script>

</body>
</html>

 

これで、

以下の様な間取り図が描けます。

jCanvasで描いた間取り図

 

今回はここまでですが、

この後は、

この間取り図をダウンロードできる仕組みの作成と、

間取り図自体をブラウザ上で誰でも自由に描けるような方法を探す予定です。

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. レンタルサーバ:おすすめの共用サーバ
  2. ホームページ(homepage)
  3. システムアップデート
  4. エックスサーバー(XSERVER)
  5. エックスサーバー(XSERVER)
  6. エックスサーバー(XSERVER)
  7. WEBサイト構築
  8. スパム(SPAM)対策
  9. サイト公開
  10. ネームサーバーの登録

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

  • ブログのプロフィールなんかで使用するキャラクター用のイラストが完成しました。プロの方に頼むとめっちゃ男前に作ってくれたから、見栄はってるみたいではずかしいけど、取りあえずこれで運用開始です。 あとは、Twitterのアイコンも現在作成して貰ってる最中やから、来週中には完成しそう!
    about 31分 ago via Twitter Web App

アーカイブ

PAGE TOP