[B! JavaScript][Canvas] herakuresのブックマーク

[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2

チャートやグラフは、さまざまなスマホアプリで見かけます。スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。スマホ向けのデザインデザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。スマホに最適化されたパフォーマンス軽量で、素晴らしいレンダリングのパフォーマンスを実現。互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモまずはスマホのアプリでよく見かける、美しいデザインと

herakures 2018/08/31

リンク

JavaScriptで取り組むクリエイティブコーディング - パーリンノイズを使いこなせ - ICS MEDIA

HTML Canvas要素とJavaScriptを使うと、手軽にクリエイティブコーディングをはじめられます。先月7月25日に開催されたイベント「Frontend de KANPAI! #4」では、プログラミングアートの楽しさを紹介すべく「JavaScriptとWebGLで取り組むクリエイティブコーディング」と題して発表しました。本記事ではそのときの登壇内容を記事として紹介します。本記事ではHTML CanvasとJavaScriptの理解につながることを目標に、次のモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル。実装する上で重要な表現のエッセンスだけを絞って解説しますサンプルを別ウインドウで開くコードを確認するステップ① 描画のためのcanvasを用意サンプ

herakures 2018/08/10

リンク

CreateJS入門サイト - ICS MEDIA

このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例簡単なサンプルを試そうブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">

herakures 2016/02/18

リンク

canvasの画像にモザイクをかける方法

canvasの画像にモザイクをかける方法公開日: 2015-05-01更新日: 2015-05-02 [詳細]今回は、canvasに描画した画像にモザイクをかける方法を説明します。これだけでも1つのウェブサービスにできそうですね〜。目次サンプルコードちょこっとメモサンプルデモダウンロードサンプルコードモザイクをかける部分のサンプルコードです。全体で描画処理を1度だけしかしないので、動作も速いし、ブラウザにも負担をかけません。ドットの大きさをユーザーが指定する形をとる場合、0が指定された時に無限ループに陥ってしまう点にご注意下さい。 JavaScript// context : canvasのコンテキスト // cw : canvasの横幅 // ch : canvasの高さ // size : size * size をモザイクの1ドットの大きさとする // [size]に[0]を指定す

herakures 2015/05/03

リンク

Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。デザイナーのハルエです。最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。そこで見つけたのがこれ。「Chart.js」。めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、

herakures 2015/03/24

リンク

はてなブックマーク

タグ

関連タグで絞り込む (8)

JavaScriptとCanvasに関するherakuresのブックマーク (5)

お知らせ

今週のはてなブックマーク数ランキング（2025年7月第3週）

今週のはてなブックマーク数ランキング（2025年7月第2週）

今週のはてなブックマーク数ランキング（2025年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス