Chart.jsとAngular JSを組み合わせて動的なグラフを生成してみる
前回に引き続き、Chart.jsのTipsです。 Chart.jsを使いグラフを表示してみる 今回はAngular.jsとChart.jsを組み合わせて、動的に値が変化するグラフを作ります。 Angular.jsの基本的な使い方は割愛します。 ちなみに今回使用するバージョンは下記のとおりです。 Angular JS v1.4.9 Chart.js v1.0.2 Angular.jsでフォームをバインドする まずはangular.min.jsを下記サイトよりダウンロードしてきましょう。 Angular JS CDNにも公開されていますが、セキュリティ面で外部ソースを引っ張るのはあまり良くないとのことですのでダウンロード版を使いましょう。 (今回のデモを作る程度でしたら、CDNでも問題ありません。) コントローラー&フォームバインドの簡単なコードが下記です。 <!DOCTYPE html> <
[Web] スマートフォンとHTML5のCanvasを用いたお絵描きを実装してみた - YoheiM .NET
HTML5のCanvasというグラフィックを描ける機能と、スマートフォンを掛け合わせて、 スマホで絵を書くWebアプリのサンプルを作成してみました。 サンプルアプリを紹介しつつ、 Canvasで絵を描く実装、タップイベントとの連携、スマホ対応のためのmetaタグなどの 実装内容を記載します(*´∇｀*) サンプル内容 Canvasを用いたお絵描きアプリを、iPhoneに最適化してみました。 Canvas上を指でなぞると線を書くことが出来て、 色の変更と線の太さの変更を行うことができます。 また、ホーム画面に保存としてから、作成されたホーム画面アイコンから起動すると、 検索バーなどの無いアプリ風な画面で立ち上がります。 ぜひお試してみて頂けると幸いです。 http://www.yoheim.net/labo/html5/canvas/canvasForTouch.html お絵描き機能の実装
![[Web] スマートフォンとHTML5のCanvasを用いたお絵描きを実装してみた - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/0dc58f26cebb68beec9cb28a7d6a919c6d1425b5/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F041.png)
HTML5のcanvasを使ったお絵かきツール詳説
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」
はじめに HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を再生するvideoタグやaudioタグなどとともに、HTML5の代表的な機能としてしばしば紹介されます。 Canvas機能を用いるとHTMLのcanvas要素で定義された領域に対してJavaScriptで描画処理を行えます。以下のような描画を行うAPIが提供されています。 線（直線、曲線） 図形（四角形、円） 色とスタイル（単色、グラデーション、影） 文字の描画（サイズ、フォント、色の指定） 変形（拡大、回転、マトリクス変換） しかし、Canvas描画処理のJavaScript APIはグラフィックス処理独特の記述方法となっており、学習のハードルはそれなりに高いものになっています。 今回紹介するjCanvasは、HTML5 Canvasの機
HTML5のCanvasを簡単に高機能化してくれるJSライブラリ「Fabric.js」
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <!-- fabric.jsの読込み --> <script type="text/javascript" src="./libs/fabric.js"></script> </head> <body> <!-- canvas要素を用意 --> <canvas id="canvas" width="300" height="300" style="border:1px solid;"></canvas> <script type="text/javascript"> <!-- Canvasオブジェクトを作成 --> var canvas = new fabric.Canvas('canvas'); <!-- ここにコードを書いていきます。 --> </scri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
