たった130行のコードだけでリアルな地形を作り出す
神様もこんなプログラムを使ったに違いない。 Hunter Loftisさんが制作したこのサイトにアクセスすると、リアルタイムで岩でできたような山脈と湖の地形が生成されます。ただの1枚の画像を毎回表示してるだけではなく、毎回ちゃんと計算してレンダリングして、この大山脈を作り出してるんです。ぜひ何度かリロードしてみてください。 インタラクティブなウェブサイトが制作できる｢JavaScript｣が使われており、約130行のコードでたったの約4KB。ドイツのプログラミング大会で優勝した64KBのリッチなCGアニメーションや、たったの4KBのアニメーションを思い出しますよね。 このプログラムで使用しているのは｢ダイヤモンド-スクエア法｣と呼ばれる手法で、正方形を4つに分割していき、その中心点をランダムな位置にずらしていくことで、自然にできたようなフラクタルの図形を作ることができるんです。これはコンピ
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
連載: IBM Watson Workspace #鬼わか アプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか 解説（前編）
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
DOM オブジェクトを Canvas に描画する - HTML: HyperText Markup Language | MDN
セキュリティ上の理由から簡単ではありませんが、HTML など DOM の内容を canvas に描画することができます。この記事は Robert O'Callahan によるブログ記事をもとに、セキュアに、安全に、そして仕様に準拠したかたちでそれを実現する方法を紹介します。 概要 HTML をそのまま canvas に描画することはできません。その代わりに、描画したい内容を含む SVG 画像を利用します。描画したい HTML を含む <foreignObject> を作り、その SVG 画像を canvas に描画するのです。 描画へのステップ 唯一厄介なのが、SVG を作ることです。SVG のための XML を含んだ文字列を作り、次のものを含んだ Blob を生成することです。 "image/svg+xml" という Blob の MIME タイプ <svg> 要素 svg 要素内の <
canvasのlazyな描画 - ぶれすとつーる
ご無沙汰してます、nazomikanです。 最近、趣味でフラクタルとかで遊ぶことが多く、フラクタル特有な計算量の多さに日々ブラウザが悲鳴をあげています。 そんなこともあってUI-Blockをさせないようにあれこれやった手法を紹介 まず最初に何も考えずに描画するコード 描画コード (github) ディレクトリ構成 (github) 結果(ブラウザ落ちるかもしれないので新しいウィンドウで見ることをおすすめします) http://nazomikan.com/archive/20121007/001/ まぁ当然大きな画像で、かつ1pxごとに計算して色を決めてるわけなので940*940ともなると死ぬほど処理がブロックされてブラウザ固まります。 残念ですね、非常に残念ですね、もはやブラクラです。 昔から大きな処理をするときはasyncにしなさいというのでlazyLoop(非同期なループ処理)を適用さ
すごい！Canvasの内容をWebM動画に変換·Whammy MOONGIFT
WhammyはJavaScriptでクライアント上でWebM動画を生成するライブラリです。 HTML5を使ってどんなことができるのか。日々新しい試みがなされています。今回はWhammyというソフトウェアを紹介します。なんとCanvasタグに描いた内容をWebMフォーマットに変換するJavaScriptライブラリです。 実行中です。左側はCanvasで、コンバートした動画が右側に描画されています。 WhammyはCanvasタグやdataURIを引数として受け取り、コンパイルメソッドで動画に変換します。生成された動画はもちろんダウンロードも可能です。 WhammyはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る 非常に面白い試みです。使いどころとしては例えばCanvasタグにはJavaScriptを使っ
Canvas vs SVG: Choosing the Right Tool for the Job — SitePoint
HTML5 Canvas and SVG are both standards-based HTML5 technologies that you can use to create amazing graphics and visual experiences. The question I’m asking in this article is the following: Should it matter which one you use in your project? In other words, are there any use cases for preferring HTML5 Canvas over SVG? First, let’s spend a few words introducing HTML5 Canvas and SVG. What Is HTML5
ExploerCanvasとFlashCanvasの比較表
HTML5のCanvasエレメントをInternetExplorerで使うための2つのライブラリ、ExplorerCanvasとFlashCanvasの機能サポート状況を表にまとめてみた。 HTMLCanvasElement ExplorerCanvas FlashCanvas FlashCanvas Pro width ○ ○ ○ height ○ ○ ○ getContext() ○ ○ ○ toDataURL() × ○ ○ CanvasRenderingContext2D ExplorerCanvas FlashCanvas FlashCanvas Pro addColorStop() ○ ○ ○ arc() ○ ○ ○ arcTo() × ○ ○ beginPath() ○ ○ ○ bezierCurveTo() ○ ○ ○ clip() × ○ ○ closePath() ○
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
Graph of transition timing functions
HTML5事情@Android, iPhone
GitHub - fabricjs/fabric.js: Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
GitHub - canvg/canvg: JavaScript SVG parser and renderer on Canvas
SVG OPEN
CanvasChanger from SVG
TM's Workspace - Android-x86でHTML5-Canvasを試してみた