<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
html2canvas - Screenshots with JavaScript
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
seen.js
source map | unminified javascript | full coffeescript seen.js has no dependencies. Licensed under Apache 2.0 To see what is new in this version, read the release notes. Demos Hello, World! Materials gallery Noisy Wave Patch Noisy Sphere Same Scene, Canvas vs. SVG Same Scene, Multiple Angles SVG Masks and Effects Text Depth of Field Audio Equalizer N-Body Gravity Simulation Mocap-Driven Skeleton 2
ナウでヤングな CSS Font Loading - Qiita
Web フォントがレンダリングされるタイミングを得ようとすると、そのやんちゃな挙動を制御するため人類は今まで下記のような対策をしてきた。 Web FontsをHTML Canvasで使う canvas要素にwebフォントを確実に描画する方法 typekit/webfontloader 無知な僕は同様の事象にハマり、一通り調べた後、下記の答えにたどり着いた。 canvas に WebFont を指定するとき、一回どこかの DOM で使う WebFont をレンダリングしておかないと死に至る現象を発見したので皆様もお気を付けください — ダメレオン (@damele0n) April 10, 2014 要するに DOM もしくは canvas 上で、そのフォントが指定されていて一度そのフォントがレンダリングされてからでないと canvas 上はレンダリングされない、ということだ。 (ちなみに
やったー JS で LGTM ジェネレターできたよー！ #HTML5 #File_API - 鈴木うどんの横須賀おもしろ生活
http://ochinchin.org/~udonchan/lgtm_gen/ コードはこのへんにある。 いわゆる HTML5 っぽいプログラムで、File API 使ってローカルの画像ファイルを canvas 読み込んで編集するという練習課題的プログラム。 canvas をどうやってファイルに落とすかのやり方はいろいろ思案したのだけれども、 今のところ以下のような書き方をしている。 var type = 'image/png'; var url = $canvas[0].toDataURL(type); var link = document.createElement('a'); link.href = url; link.download = 'output.png'; var click = document.createEvent("Event"); click.initEve
cutjs - cutjs
Your go-to resource for engaging and informative content across a wide range of interests. Welcome to cutjs Welcome to cutjs.Stay Updated on Business Trends and DevelopmentsCutjs provides news and insights on entrepreneurship, market movements, management strategies, and industry updates to keep readers informed about the evolving business landscape.
Exploring canvas drawing techniques — Perfection Kills
I recently started working on adding some good-looking brushes to Fabric.js. We've had free drawing functionality for a while, but it was... laughable. Just a simple pencil of varying thickness. Far from anything you would see in those amazing drawing applications popping up in the last few years — Mr. doob's Harmony, deviantART's Muro, or mudcu.be Sketchpad. Freedrawing is one of the strongest po
『スマートフォン向けJavaScriptライブラリ tofu.js』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは！ 現在ブラウザベースの新規ゲームの立ち上げをしています、2013年入社のチャーリー@charlie10151015です！ 主にフロント側をメインにJavaScriptというへんてこな言語を書いています。 最近のマイブームは3D関連でthreejs, webGL, Blenderなどに手を伸ばしております。 tofu.jsについてお話できればと思います。 tofu.jsとは？tofu.jsはHTML5に組み込まれたcanvasをFlashライクなコードで利用できるJavaScriptのライブラリです。 弊社の主席エンジニアが開発し、
JavaScriptで画像のクラスタリングによるドット絵風加工 – Rest Term
pixel clustering using k-means++ 前回のJavaScriptでPoisson Image Editingによる滑らかな画像合成に引き続き、HTML5 Canvasを使ったJavaScriptによる画像処理の一例を紹介します。 今回は画像の画素値に対するクラスタリング(分類)を画像加工用途に応用します。クラスタリングには各画素のRGB値を特徴ベクトル(次元数3)としてk-means法と呼ばれる手法を使って行います(実装上はk-means法の初期値選択アルゴリズムを改良したk-means++法を利用)。以下のサイトでOpenCVを利用した実装例が紹介されています。 k-meansクラスタリングによる画像分割，減色 – opencv.jp 上記サイト内でも言及されているように、k-means法による画像の領域分割や減色処理はあまり良い結果が得られないことが知られて
Fabric.js Javascript Library
Fabric.js is a powerful and simple Javascript HTML5 canvas library Fabric provides interactive object model on top of canvas element Fabric also provide serialization and has SVG-to-canvas (and canvas-to-SVG) parser Fabric.js Features Text editing On-canvas text editing with rich styling, IME and curve support
Optimizing your JavaScript game for Firefox OS – Mozilla Hacks - the Web developer blog
When developing on a quad core processor with 16 gigabytes of RAM you can easily forget to consider how it will perform on a mobile device. This article will detail some best practices and things to consider for moving a game to Firefox OS or any similar hardware target. Making the best of 256 Mb RAM/800 Mhz CPU There are many areas of focus to keep in mind while developing a game. When your goal
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いうえに実行時の再生負荷が低くパフォーマンスに優れるという利点があります。たとえばキャラクターが歩くアニメーションを再生する
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
CreateJSを使用した際に一部のAndroid4端末でおこる不具合に関して – 水玉製作所
これはCreateJSを使用した際にAndroid4を搭載した一部のスマートフォンで発生する不具合に関する報告である。 概要 CreateJSを使用した際にAndroid4を搭載した一部のスマートフォンで、不具合が発生することがいくつかのブログで報告されている。問題報告と同時に解決策を提示してるブログもある為、それを検証した結果を報告する。 本件に関するブログ 本件に関して触れているブログとして以下のものがある。 (1)まるちゃんブログ CreateJSでハマったこと (2)1 pixel｜サイバーエージェント公式クリエイターズブログ Flashで作るスマフォブラウザゲーム向けアニメーション (3)しょぶろぐ Android4.0とCanvasアニメーションの話 不具合の起こる端末 実際に不具合の起こる端末として以下の名前が挙げられている。[]内の数字は上記のブログの番号を示すものである。
CreateJSでハマったこと - 株式会社CFlatの明後日スタイルのブログ
長らく仕様策定に手間取っていたHTML5が大きく推進することになった理由の一つには、やはりAppleがiPhoneのFlashへの非対応を発表したことがあるでしょう。HTML5自体はいまだ完全には標準化されていませんが、主要ブラウザでは既にcanvasによる描画処理をサポートするようになっており[1]、今後徐々にFlashからHTML5への移行が進んでゆくものと思われます[2]。 FlashのプロジェクトをHTMLに変換するツールにはSwiffy(Google)、SWF Animation Converter(マルチでバイスlab.)など何種類かありますが、今のところブラウザ互換性や、ActionScript部分への対応状況などの問題により、これといった決め手がないのが現状です。 その中で、Adobe Flash Professional CS6にcanvasアニメーション用フレームワーク
Tearable Cloth
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
描画とかGPUアクセラレーションの怪 (モバイル編)
何かと不透明なあたり 気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。 今回は、GPUを効かせる == それに関連するプロパティ（ただしOSやバージョンによって何がトリガかは厳密に異なる）を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。 このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思います。WebKitのレンダリングプロセスにはじまり、GPU命令のサポートが受けられるのはどんな操作だとか、GPUへ処理が預けられるレイヤーの生成がどーとか、最近よく見聞きします。 自分が業務で扱っているスマートフォン向けのWebサービスでは、このような描画パフォーマンスの問題は、スクロールパフォーマンスと合わせて非常にクリティカルです。この辺りについてのロジカルなまとめは、某氏が近日中にまとめるらし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.smartjava.org/content/capture-canvas-and-webgl-output-video-using-websockets/
Odin.js
GitHub - TooTallNate/ansi-canvas: Render a <canvas> node to your terminal
PaintCode - Turn your drawings into Objective-C or Swift drawing code