JavaScript

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で長方形を描く】

【②、drawLineで線を描く】

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

【③、drawTextで文字を書く】

 

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

以下の様になります。

 

これで、

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

jCanvasで描いた間取り図

 

今回はここまでですが、

この後は、

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

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

弊社では、以下の方に向けて、WordPressの短期学習プログラムを
格安(15,000円~)で提供しております。

  • 個人でWordPressを使ったサイト(個人ブログやアフィリエイトサイトなど)構築をお考えの方
  • WordPressを使って副業で稼ぎたい方
  • フリーランスでWordPressを使ったお仕事をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. JavaScript
  2. JavaScript

    Javascript

    「jQuery ui Datepicker」のオプション

    前回の記事では、「jQuery ui Datepicker」の設定…

  3. JavaScript

    Javascript

    画像 右クリックでのダウンロードは禁止!!

    普段物件画像を取り扱うシステムを構築することが多いんですが、不動産…

  4. JavaScript

    Javascript

    Yahoo!地図のWeb APIを使ってみました!!

    弊社では今までGoogleMapしか使ってこなかったのですが、使用…

  5. JavaScript

    Javascript

    Yahoo!地図にコントロール追加

    Web APIを使って、Yahoo!地図にいくつかのコントロールを…

  6. JavaScript

    Javascript

    Google マップのストリートビューを実装してみました!!

    Google マップのストリートビューを実装してみました。&nbs…

最近の記事

  1. MySQL(マイエスキューエル)
  2. MySQL(マイエスキューエル)
  3. WordPress(WP)
  4. SEO(エスイーオー)
  5. ホームページを活用
  6. SEO(エスイーオー)
  7. SNS(ソーシャルメディア)
  8. ホームページ制作ツール
  9. WordPress(ワードプレス)
  10. SNS(ソーシャルメディア)
PAGE TOP