Content-Length: 272907 | pFad | http://b.hatena.ne.jp/gfx/canvas/
Rust で WebAssembly を出力する
もう結構前になりますが、Rust で Emscripten を利用することなく WebAssembly の出力ができるようになりました。それにより、Rust を使った WebAssembly の開発が現実的な選択肢としてさらに力を帯びてきました。 自分の勉強で Rust から WebAssembly に出力するプログラムを書いてみたので、その道筋をご紹介することで自分のような Rust 初心者の方々の WebAssembly 開発の助けになればと思い、この記事を投稿しました。 もし記事中に間違い等がありましたら、是非 @tkihira までご連絡ください。 Emscripten との依存関係を切った Rust つい最近まで、WebAssembly の出力は Emscripten を使うことがほとんどでした。Emscripten は、元々は他言語のプログラムを JavaScript に変換す
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) });
HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証 | ICS MEDIA
HTML5で2次元のインタラクティブコンテンツを制作するには、さまざまなJavaScriptライブラリがあります。どれを選択するべきか迷いどころではないでしょうか？ そこで今回はHTML5の各種JavaScriptライブラリについて、パフォーマンスを比較検証してみました。 今回検証したフレームワーク メジャーなJavaScirptライブラリとして次の5種類でテストしました。バージョンは2013年4月10日現在の最新版を使っています。詳しい検証方法は記事の後半にまとめています。 CreateJS (EaselJS 0.6.0) Arctic.js (v0.1.11) enchant.js (v0.6.3-48) Pixi.js (v1.0.0) Processing.js (v1.4.1) 各種JavaScirptライブラリのベンチマーク結果 ※グラフの数値が高いほどパフォーマンスが高いこと
Android × Canvas の即死ポイントとその回避策 | buccchi.jp
CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション
スマホ向けCanvasゲームの作り方
22. )!" (!" '!" *+,-./%0" &!" *+,-./%01" %!" *+,-./&" $!" 023245"6" #!" 023245"677" !" #" #!" $!" %!" 29. )!" (!" '!" +,-./0%1" &!" +,-./0%12" +,-./0&" %!" 134356"7" $!" 134356"788" #!" !" !*'" #" #*'" $"
HTML5 Canvas with JSX - 葡萄酒の雑記集 2.0（笑）
JSXを触ってみる Canvasのリッチな機能を使って描画するのはid:xaicronさんが既にやっていたので、私はピクセルをゴリゴリ描画する低レイヤーな部分を触ってみる。 あんまり面白いテーマが思いつかなかったので、とりあえずマンデルブロ集合を描画することに。どの程度最適化されるのかが気になったので、あまり手でコードは崩さずに安直で素直な実装を心がけた。 ちなみに、同じくJSXを使ってWebGLを触るのをid:santarhくんがやっていたので、こっちも見ると良いかもしれない。 JSXでWebGL - Santarh.mm デモ ソースはデモページに併記してある。Canvasの高さを基準に虚数軸をiから-iまで計算しているので、幅を高さの二倍程度に設定すると綺麗に全体が描画されるはず。 初期値だと1秒程度で描画されるが、あまりに大きな数字を設定するとブラウザが死ぬので注意*1。 demo
Canvas始めました – Canvas APIで遊んで（遊ばれて）わかったことをだらだらと
「Canvas始めました」でCanvasのローレベルAPIを使って投稿をしてきました。 昨年(2011)9月にあるところで”Canvas”について話す機会があり、その時にお見せしたデモ・コードを再検証がてら記事にしてきました。 その時もお話ししたのですが、HTML 5(Canvas)を使ったインタラクティブ・コンテンツ制作はかなり大変、だということをあらためて、本当にあらためて実感しました。 Canvas API操作はJavaScriptを使います。 私のJavaScriptスキルやCanvas APIへの理解が心もとないせいだと言われれば反論のしようも無いのですが、ご興味があれば長文ですが少しおつきあいください。 繰返しになりますが、Canvasでインタラクティブなものを作るのは大変！ 大変だと思った理由を書いていきます。 無知によるものもあるかもしれません、その時はぜひコメントなどで教
SVGヤバイ - 最速チュパカブラ研究会
canvas を苛めていたら気づいたことがあったので書きます。（この記事は2011年5月現在の情報です。あなたがこの記事を読んでいる時点で、より新しくて良い方法が無いか確認して下さい） 基本的な話 canvas には、図形を描画する機能だけでなく、描かれている内容を読み取る機能があります。getImageData を使うと、canvas の内容をピクセル単位で読み取って画像処理をかけたりできます。また、toDataURL を使うと canvas の内容を Data URI として出力でき、サーバに送信したりできます。 しかし、この機能にはリスクがあります。例えば、悪意のあるページを開いただけで、社内SNSにしか公開していないあなたの顔写真を canvas 経由で抜き取られるかもしれません。そういう事が起きないように、他のサイトから読み込んだ画像が canvas に描画されている場合（以下、
SVGをCavnasで利用する方法
という書き方が許されるのですが、残念ながらFirefoxやChrome、Safariといった他のメジャーなブラウザではこの方法は対応しておりません（そもそも仕様違反です）。というわけで、ちょっとひねった方法を使う必要があります。 <!DOCTYPE html> <html><head><title>SVGをCanvasで利用する</title> <script> var svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n' + '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + '<g transform="matrix(0.0298614501953125,-0.00541687011718
Canvas始めました – キャプチャ画像を書出し
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillStyle = "#ff0000"; context.fillRect(50,30,250,100); window.open(canvas.toDataURL(), "canvasOutput","left=0,top=0, width="+canvas.width+",height="+canvas.height+", toolbar=0,resizable=0"); toDataURL([data Type:String]):String data TypeデフォルトはPNG, image/png 戻り値（Data URI形式） data:image/png;base64,… 書出し画像タ
HTML Standard
Firefox1.5+Safari2+Chrome1+Opera9+Edge79+Edge (Legacy)12+Internet Explorer9+Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+ Categories:Flow content.Phrasing content.Embedded content.Palpable content.Contexts in which this element can be used:Where embedded content is expected.Content model:Transparent, but with no interactive content descendants except
HTML5花火大会から学ぶcanvasの表現力
HTML5花火大会が始まりました！ jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています！ 本当にどの花火もクオリティーが高くて、見るだけでも楽しめます。 HTML5花火大会 花火のコードから学ぶcanvasの表現力 花火のコードの大半はHTML5のcanvas要素を使って描画されています。 canvasってなんだっけ？ javascriptから自由にグラフィックを描画できる要素です。 以下のエントリーにわかりやすくまとまっています。 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 今更聞けないcanvasの基礎の基礎 canvasで花火を描くには？ 花火のお手本コードから見ていきま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/gfx/canvas/
Alternative Proxies:
HTML5 の Canvas で getTransform が使えるようにしてみた - あらびき日記
Goodboy Digital
Learn web development | web.dev
chrome-life.com