Resizing and Cropping Images with Canvas | Codrops
Learn how to resize and crop images using JavaScript and the HTML5 Canvas element using controls, commonly seen in photo editing applications. In this tutorial we’re going to learn how to resize and crop an image using the HTML5 <canvas> element, and while we’re at it, let’s create some fancy controls for resizing, commonly seen in photo editing applications. In a real world example a website or a
たった130行のコードだけでリアルな地形を作り出す
神様もこんなプログラムを使ったに違いない。 Hunter Loftisさんが制作したこのサイトにアクセスすると、リアルタイムで岩でできたような山脈と湖の地形が生成されます。ただの1枚の画像を毎回表示してるだけではなく、毎回ちゃんと計算してレンダリングして、この大山脈を作り出してるんです。ぜひ何度かリロードしてみてください。 インタラクティブなウェブサイトが制作できる｢JavaScript｣が使われており、約130行のコードでたったの約4KB。ドイツのプログラミング大会で優勝した64KBのリッチなCGアニメーションや、たったの4KBのアニメーションを思い出しますよね。 このプログラムで使用しているのは｢ダイヤモンド-スクエア法｣と呼ばれる手法で、正方形を4つに分割していき、その中心点をランダムな位置にずらしていくことで、自然にできたようなフラクタルの図形を作ることができるんです。これはコンピ
HTML5 Canvas Graphs and Charts - Tutorials & Tools
HTML5 is an advanced version of the HTML language which supports audio-visual elements. This means when you use HTML5 to build your app or website, you will be able to run JavaScript as it supports it. It allows your websites or application to be more powerful and diverse. Canvas graphing is one of the major trends in the web design world today. With the use of HTML5, developers have been able to
グーグル、フラクタル図形を描画するウェブアプリケーションを公開
かつては、代表的なフラクタルであるマンデルブロ集合の探求にスーパーコンピュータが必要だった。だが今やGoogleは、このシュールな数学的図形を最高のパフォーマンスや極めて繊細な陰影で描画できるわけではないが、ブラウザが昔のスーパーコンピュータを凌ぎ得ることを示すウェブアプリケーションを作り出した。 これは「Julia Map」と呼ばれるプロジェクトで、比較的新しいウェブ標準である「Web Workers」を採用している。Web Workersによりブラウザは、いわばブラウザの思考の前面において比較的平凡なユーザーインターフェース作業をこなし、それと並行して、バックグラウンドで処理タスクを実行できる。 マンデルブロ集合は、ジュリア集合と呼ばれる別のフラクタルと近い関係にある。Googleのアプリケーションでは、それぞれの集合を多様な形状で表示する。このアプリケーションでは、ウェブプログラミン
Canvas tutorial - MDC
このチュートリアルは、 <canvas> 要素を使用して二次元のグラフィックを描画する方法を、基本から説明します。ここでの例は、キャンバスで何ができるかを明確に示すものであり、独自のコンテンツを作成するためのコードスニペットも提供しています。 <canvas> は HTML の要素であり、スクリプト（ふつうは JavaScript）を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成したり、簡単なアニメーションを作成したりすることができます。 <canvas> は Apple が macOS Dashboard のために WebKit に初めて導入した後、ブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。 <canvas> を使うのはそれほど難しくはありませんが、 HTML と JavaScript の基本的な理解が必要です。一部の
HTML5 canvasのテクスチャマッピング「Projective」 - 秋葉秀樹 個人ブログ
canvasで画像を歪ませる、例えばActionScript 3.0のdrawTriangleのような、メッシュを作ってマッピングするにはどうしたらいいんだろう？と思い調べてたら、やはりありました。
HTML5入門：アニメーションの実装方法３種
HTML5・CSS3のような新しい技術の問題点は、HTML4やらFlashなどの枯れた技術と違ってノウハウ・ライブラリ・ツールとかがまだ十分にそろっていない事。普及のタイミングもまだはっきりとしていないこの段階で手を出せない・出しにくいと感じている人が多いのも良く理解できる。 私から見れば、逆に「こんな楽しい状況は滅多にない」わけで、商売になるかならないかは二の次にしていろいろと試したくなる。 今日作ったのは、HTML5+CSS3上で可能になる（ただし現在ではWebkit独自の拡張を含む）３つのアニメーション・テクニックの比較（左に貼付けたものがそれ、Safari/Chromiumだとすべて動く。Firefox/OperaだとDOMとCanvasのみ（ただし別ウィンドウで開かないとCanvasが動かないークロス・ドメインセキュリティのバグか？））。 詳しくはソース（参照）を見ていただければ
Normal Mapping with Javascript and Canvas
Update: Newer WebGL based version This is an old experiment. I created a newer much faster webgl powered library for you to play with this technique. It's called normalmap.js. It allows you to easily apply normal mapping for interactive lighting effects in javascript. Original Article I made a little experiment with normal mapping and phong shading in javascript which turned out to work quite well
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - maroslaw/rainyday.js: Simulating raindrops falling on a window
Starlit Night - yet another online planetarium
Paper.js
Home | Nidhis
FlowerPower
HTML5 Canvas Cheat Sheet