[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。 スマホ向けのデザイン デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。 スマホに最適化されたパフォーマンス 軽量で、素晴らしいレンダリングのパフォーマンスを実現。 互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモ まずはスマホのアプリでよく見かける、美しいデザインと
![[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2](https://cdn-ak-scissors.b.st-hatena.com/image/square/38d845daa3306af6511040b4844ec0fb7250d64c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018083111.png)
手書き風の図形を描画できるライブラリ「Rough.js」
「Rough.js」はJavaScriptで作られたライブラリで手描き感あふれる図形を描く事ができます。「直線」や「多角形」「円」などを描画できることはもちろん、SVGのPath要素の記述も可能なため、複雑な図形を描くこともできるとのことです。 Rough.js http://roughjs.com/ Rough.jsを使って、たとえば正方形を描くコードは以下の通り。 <pre>const rc = rough.canvas(document.getElementById('canvas')); rc.rectangle(10, 10, 200, 200);</pre> 線が少しゆがんだ形となり味のある正方形になります。 また以下のようなコードを書いて…… <pre>rc.circle(80, 120, 50); rc.ellipse(300, 100, 150, 80); rc.line
フロントエンドがサーバー負荷を抑えるためにできること - アニメイトラボ開発者ブログ
はじめまして、アニメイトラボのフロントエンドエンジニア id:koharusugiura です。 フロントエンドエンジニアとして働いていると、いかにサーバーサイドに負担を掛けずに処理を行うかについて考えることも多いと思います。 そこで今回は、サーバーに画像の転送を行う前にクライアント側で画像加工をする話について書きます。 この記事は animateLAB Advent Calendar 2015 15 日目の記事です。 qiita.com JavaScript で画像処理を行う ウェブアプリケーションで画像ファイルの加工が要件にある場合、サーバー側で画像加工を処理するケースが大半だと思います。 しかし、データ通信のことを考えると、最適な考え方とは言えない気がしています。 近年、日本のインターネット回線の速度は大きく向上しているとはいえ、モバイルデータ回線はまだまだ速度的に完璧とは言えません
HTML5/Javascriptの画像処理ライブラリまとめ
HTML5(Canvus)、Javascript向けの画像処理ライブラリについてまとめたので紹介します。 続きを読む
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
Cacheを使ってアニメーションのフレームレートを改善する ～ CreateJS公式サンプルを使ってみる (第4回)
Cacheの効果を示すサンプルです。左上にfps(frame per second)と表示されているのが、1秒間に何フレーム描写できたかを示しています。 Cacheを有効にするチェックボックスをチェックすると、動きが滑らかになり、fpsの数字が増えているのが分かると思います。Graphicsのメソッドで作成した丸い画像を毎回メソッドで書き直すのではなく、1度だけ作成して画像イメージとしてCache(メモリ)に入れておくことで、2回目以降の演算が減るため、描写性能が上がります。 Cacheの絶大な効果がよく分かると思います。 次回紹介する予定ですが、Cacheした画像の形状が変わる場合は、cacheUpdate()というAPIを実行する必要があります。 以下にCache.htmlからJavascript部分を抜き出したCache.jsを示します。 var canvas; var stage;
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
Flat Surface Shader
Admit it, 3D is cool. But, you know what's cooler? 2D. I love WebGL, but unfortunately it doesn't work everywhere. This lighting simulation can be configured to use either the 2D context of a canvas element or an array of SVG polygons to draw the triangles. It also utilises native Float32Arrays to store numerical data for highly optimised calculations. This is a collaborative effort between Matthe
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
javascript - で bilateral filter (選択的ガウスぼかし)を実装してみた : 404 Blog Not Found
2012年09月06日18:03 カテゴリアルゴリズム百選Math javascript - で bilateral filter (選択的ガウスぼかし)を実装してみた HTML5 Canvas Steve Fulton / Steve Fulton / 安藤 慶一訳 [原著:HTML5 Canvas] 「選択的ガウスぼかし」がえらい気に入ったので、アルゴリズムの学習も兼ねてJavaScriptでやってみたら思いの他使い物になりそうということで。 Demo: File APIを実装しているブラウザーで動きます。IEの方ごめんなさい。IEだと10以降になります。小さめのファイルを読み込ませて下さい。1024*1024ピクセルを一応の上限に設定してあります。(追記2021.11.29:上限を16Mピクセルまで上げました。その他CSS周り修正) Info: Source: Radius: Thr
JavaScriptグラフィックス
TOPICS Web , HTML/CSS , JavaScript 発行年月日 2012年03月 PRINT LENGTH 288 ISBN 978-4-87311-528-3 原書 Supercharged JavaScript Graphics FORMAT PDF Webテクノロジーが進化したことによりJavaScriptグラフィックスを使ったリッチなWebアプリケーション開発が可能になりました。本書ではJavaScriptによる最新のグラフィックスプログラミングについて解説します。ゲームやDHTMLエフェクト、HTML5 Canvasなどの実例を通して、高性能なJavaScriptグラフィックスの実装方法を学びます。グラフィックスやアニメーションだけでなく、WebSocketを用いた通信、Google Chart Tools、スマートフォン向けのトピックまで幅広く扱います。日本語
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvasをめちゃくちゃ使いやすくするライブラリ「UnitaryJS」作った - Qiita