HandyGraphic.js

A simple javascript graphic library for graphics, apps and games.

Download View on GitHub

HandyGraphic.js とは？

HandyGraphic.jsはjavascriptで開発されたグラフィックスライブラリです．HTML5 Canvasベースの単純な図形描画や，アニメーション機能をサポートしています．

図形描画

HandyGraphic.js の図形描画機能は Handy Graphic というC言語のグラフィックスライブラリを元に開発されています．そのため，C言語版 Handy Graphic で書かれたプログラムのWebへの移植に使うこともできます．C言語版 Handy Graphic へのリンクは こちら になります．

その他の機能

図形描画機能だけではなく，SceneやSpriteと言ったクラスをサポートしているため，簡単なアニメーションやゲームの作成に使用することも可能です．詳しい使い方は Tutorial または，API Docs を参照してください．

Getting Started

使い方は，HandyGraphic.jsを読み込むだけです．他に依存しているライブラリはありません．まずは，以下のサンプルを使ってHandyGraphic.jsを使ってみましょう．その他のサンプルは Examples からダウンロードできます．

index.html 


<html>
  <head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Getting Started | HandyGraphic.js</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src='handyGraphic.min.js'></script>
    <script src='main.js'></script>
  </body>
</html>

main.js 


handyGraphic.globalize(); // handyGraphic.jsをグローバル展開する
window.onload = function () {
  var Hg = new Graphic(); // Graphicオブジェクトを作成する
  var win = Hg.Open(400, 400); // 描画するウィンドウを作成する

  Hg.Line(100, 100, 300, 300); // 直線の描画
  Hg.Circle(150, 150, 100); // 円の描画
  Hg.Text(10, 380, "HandyGraphic"); // 文字の表示
}

今すぐ，HandyGraphic.jsを手に入れよう！

Download

Guide

HandyGraphic.jsを使用するために，役立つページへのリンクを示しています．まずはチュートリアルから始めてみましょう．チュートリアルを終えることで図形描画と簡単なアニメーションに関する知識が身につきます．

API Docs

HandyGraphicのAPIドキュメント

API Docs

Tutorial

HandyGraphicを使うためのチュートリアル

Tutorial

Examples

サンプルのページ

Examples

Contact

Twitter : @kengo92i

ライセンス

The MIT License