GitHub - canvg/canvg: JavaScript SVG parser and renderer on CanvasYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Twitterで草を生やせるTwithubを作った - Qiita
リンク Twithub リポジトリ サイトの内容 Twitterのつぶやきの頻度に応じて草を生やしたヒートマップを描画するサイトです 過去のつぶやきの取得には外部サイトであるTwilogのcsvを使用しています(ユーザーが多そうなため) Twilogはすぐ登録できますし、Twilogの設定内ですぐ過去3000件のツイートが取得できるので新規ユーザーの方も大丈夫です csvの読み込みはそんなに時間かからないのでちょっとの手順で見れると思います 今後の課題はスマホからの動作とツイート時の結果画像添付です 背景 QiitaHubに触発されて作りました 正直誰か作ってるやろと思ったが反応を見るにいないっぽい？ 意外と作りたかった人が多いことに気づく 月曜日にアイデアを思いつき、火曜日に開発しあとはちょくちょく触りつつ土曜日にリリースしたので一週間くらいでできました Twitterにツイートしたらわ
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">
Web FontsをHTML Canvasで使う - NullPointer's
といっても特に変わった事をする必要も無く、CSSでWeb Fontsを定義して、Canvasのfontプロパティに定義した名前をセットするだけ。 @font-face{ font-family: MadoMagi; src: url('./MadokaRunes.ttf') format("truetype"); } ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "32px MadoMagi "; https://nullpon.moe/dev/sample/css/webfont/ こちらのサイトのソースを見てもらえば分かるが、ページのローディング時のCanvasへの書き込みは、jQueryのdocument.readyイベントではなくwindow.loadイベントで行っている。これはdocument.
治安の悪い Slack Emoji を作るツールを作った - Qiita
(治安の悪くない Emoji も作れます) 作ったもの ここで遊べます おもしろいところ GIF アニメのエンコードまですべて js で完結しているので、ありがちな「謎のサーバーに画像アップロードするといい感じに変換してくれる」的なサービスと違って、素性の知れたコードがクライアント側でサクサク動きます。 なにができるの？ 画像を 128px x 128px に変形 画像を、 Slack にアップロードできる（現状）最大サイズの 128px x 128px に変形します。 ローカルのファイルから選ぶか、画像の URL を入力できます。アップロードするわけではないので、デカい画像でもサクサクなのがお気に入りです。 変形は 正方形に引き伸ばし（アス比無視） 正方形いっぱいに拡大して、余ったところはトリミング（アス比維持） 正方形に収まるように縮める（アス比維持） から選べます。 テキストから画像
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アニメーションフレームワーク「CAAT」 - Chrome Life
前回の記事で、200行で作れるHTML5製テトリスをご紹介してたくさんの反響がありました。 誰もが知っているゲームを少ないコードで実現していることと、コードが読みやすくてプログラミングのスキルアップに役立つということで関心をもたれたと思います。 これを機会に自分でもゲームを作ってみたいと思った方もいるのではないでしょうか？筆者もそのうちの一人です。 しかし、フルスクラッチで作るとなるとそれなりに経験が必要ですし、高度な動きを実現するにはどうやって作れば良いのかも分かりません。 そこで今回ご紹介するのは、ゲーム作りに最適な、高性能JavaScriptアニメーションフレームワーク「CAAT」です。（CAATは、Canvas Advanced Animation Tookitの略） 「CAAT」は完全なゲームフレームワークとして様々な機能が提供されています。 CAATの機能と特徴 オンスクリーン
[JS]Canvasを使って、リアルタイムにヒートマップを描くスクリプト -real time heatmap
[JS]Canvasを使って、リアルタイムにヒートマップを描くスクリプト -real time heatmap real time heatmap デモ [ad#ad-2] デモの画像の上でマウスを動かすと、その動いた量に伴いカラーがブルー、グリーン、イエロー、レッドとマウスの移動し滞在した量をヒートマップとして生成します。ヒートマップのデータはエクスポートも可能です。 また、iPhoneのシングルタップもサポートしている、とのことです。 スクリプトはjQueryなどの他のスクリプトは依存せず、下記のようになります。 JavaScirpt /* Copyright (c) 2010, Patrick Wied. All rights reserved. Code licensed under the BSD License: http://patrick-wied.at/static/li
Dynamic Heatmaps for the Web
heatmap.js Dynamic Heatmaps for the Web heatmap.js is a lightweight, easy to use JavaScript library to help you visualize your three dimensional data! Use it to add new value to your project, build a business based on it, study and visualize user behaviour, or why not build something completely crazy/awesome? Whether you want to have an aggregated overview of your users behaviour, or look at thous
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、スマートフォン向けのトピックまで幅広く扱います。日本語
HTML5のCanvasをFlashライクに使う「EaselJS」が最新版を公開
Flashのエンジニアとして著名なGrant Skinner氏が開発している、HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」の最新版、v0.4が公開されました。 9カ月振りになる最新版では、ビットマップアニメーションやスプライトシートエンジンを全面的に書き換えたとのことです。 completely reengineered sprite sheet engine, which includes a host of new features: multi-image sprite sheets, variable frame dimensions, frame reuse, image preloading, and a new data format. Note that this change will require som
面白い！JavaScript+Canvasによる画像差分表示·JS-ImageDiff MOONGIFT
JS-ImageDiffはJavaScript+Canvasタグを使って二つの画像の差分表示を行うライブラリです。 GitHubでは差分をWebブラウザ上で閲覧できますが、その時に画像の差分表示も行えるのを知っているでしょうか。スライダーで動かしたりして差分を確認できるのですが、その一つの差分表示をオープンソースで再現するのがJS-ImageDiffです。 サンプルです。上が元、中間が変換後そして下が差分となります。どこが違うのか一目で分かります。 左が影無し、右が影ありです。一致している部分だけが表示されています。 サイズが違う場合の差分表示です。 JS-ImageDiffはCanvasタグを使って画像を読み込み、その差分を表示しています。各ピクセル単位で画像を比較して同じであれば黒、違う場合はうまく表示するというやり方でここまで見事に表示できるのが面白いですね。 JS-ImageDif
Flash→HTML5移植は本当か？ ハンゲームの事例
「HTML5でFlashが不要になる」――。次世代Web標準規格「HTML5」でよく聞くのがこんなフレーズだ。ところが、実際にFlashで作ったコンテンツをHTML5（+JavaScript）で置き換えた、なんて話は（少なくとも日本では）ほとんど聞かない。本当にFlashコンテンツをHTML5で（しかも商用レベルで）置き換えられるのだろうか？ そう思っていたら、あの「ハンゲーム」を手掛けるNHN JapanがモバイルゲームのHTML5化を着々と進めていると聞き、同社の「HTML5勉強会」（2月25日開催）に行ってみた。勉強会では同社のエンジニアが、HTML5/CSS3によるオンラインゲームの開発事例について語った。
HTML5とCanvasで作られたゲーム厳選18選 | Web活メモ帳
HTML5のゲーム HTML5とCanvasで作られたゲームもなんだか沢山出てきたように思います。 本日はHTML5のゲームをまとまた「Showcase of Games Developed Using HTML5 Canvas」というエントリーのご紹介。 いくつかご紹介 Sinuous プレイ 赤い点を避けて行く単純なゲームです。 iPhone・iPadでも遊べます。 Super Mario Kart プレイ 画面は小さいですが、まさにマリオカート！ HTML5のCanvasで作られています。 Pacman プレイ ChromeだとJavaScriptが高速に動作するので難易度は高めです。 ソースコードがgithubにて配布中 これとは別に、Googleがパックマン30周年を記念して作ったゲームもあります。 http://www.google.com/pacman/ JQuery Rac
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://chibinowa.net/note/vuejs/vue-advent2017.html
Web Fonts
HTML5+Javascriptゲーム - ソーシャルゲーム制作・開発 - アネックス株式会社
GitHub - Arcticjs/Arctic.js: HTML5 game framework
camanjs.com
JavaScriptグラフィックス