覚書 Wiki*
JavaScript Advent Calendar 2010 4日目 canvasのいろは Advent Calendar初参加させていただきます。 今日はHTML5の目玉のひとつであるcanvas(2D)をつかうにあたっていろはを解説したいと思います。 といいながら、canvasについてはいろいろなサイトのチュートリアルがかなり充実してます。MDC Doc Centerとか。 ここで書いていることはそのごく一部なので、興味を持った人はそういうのをみてほしいです。 3D(WebGL)の話もしたかったんですが、わたしの環境で動かないのでまたこんどにさせてください。 はじめに 書き手について hYagni(屋国 遥)と申します。日曜プログラマで、最近はcanvasまわりあるいはFirefoxまわりのJavaScriptやPHPをよく書いてます。 最近の悩みは関数名と引数が覚えられないことです
HTML5+JSで弾幕STGを作ってみた - ゲーム作ろうよ
HTML5とJavascriptを用いて弾幕STGを作りました。 大学のJavascriptで何か作って来いレポートで3日で作ったものです。 手軽に作れるのでみなさんも試してみてはいかがでしょうか。 雲色の風 動作環境 推奨 chromeの最新版 動作 firefox3.0以降 safari3.1 ipad ipadのタッチ動作にも対応してますが重いです。
xc.js - Canvas Game Framework
xc.js is a framework for HTML Canvas games in Javascript. It's simple and fun to use and you can even try it out right here in your browser. But that's not all. xc.js also runs on other platforms. You can write your games in Javascript and run them in all sorts of cool places (like on your phone!). Try xc.js now! You can download xc.js and run it on Windows, Linux, or OS X. Or, even better, try it
Face Detection in JavaScript via HTML5 Canvas
Badass JavaScriptA showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett. You have probably seen face detection at work in programs like iPhoto and Picasa, but what if you could do that performantly in JavaScript? Chinese developer Liu Liu has done the honors, and implemented the algorithm using the canvas element. The algorithm is implemented on
BallDroppings
Home > Hauskoja faktoja > 6 asiaa, jotka jokaisen tulisi tietää Pets-kolikkopelistä Pets-kolikkopeli on hauska ja houkutteleva peli, joka on räjäyttänyt ihmisten mieliä siitä asti, kun se julkaistiin ensimmäistä kertaa. Riippumatta siitä, oletko kissa- tai koiraihminen, tässä pelissä on joitakin karvaisia ja sulkaisia kavereita kiinnittämässä sinun huomiotasi. Jos rakastat eläimiä, olet täyttänyt
JavaScript/HTML5 Emulators
JavaScript/HTML5 Emulators Nintendo Entertainment System Emulators JSNES: A Javascript NES emulator CycloaJS: CycloaJS is a NES emulator implemented in JavaScript. FaithJS: FaithJS is a NES emulator which runs on your chrome. nes-js: This is JavaScript NES(Famicom) emulator which runs on browser. flownes: A NES emulator written in ES2015+ with flowtype Weaknes: Weaknes is a NES emulator written by
Image evolution
The goal is to get an image represented as a collection of overlapping polygons of various colors and transparencies. We start from random 50 polygons that are invisible. In each optimization step we randomly modify one parameter (like color components or polygon vertices) and check whether such new variant looks more like the original image. If it is, we keep it, and continue to mutate this one i
ゲーム作成で学ぶCanvas機能 | エンタープライズ | マイコミジャーナル
Canvas Tutorial by Bill Mill IEを除く主要ブラウザで対応が進みHTML5で正式な規格になると見られているHTML要素のひとつにCanvasがある。CanvasはJavaScriptから操作できる描画エリアで、これまでWebブラウザで実現するにはプラグインを必要したような処理をJavaScriptから簡単に実現できるようになる。 Canvasを使ったプログラミングに興味があるのであれば、Bill Mill氏が作成したCanvas Tutorialはかなり優れた教材といえる。ゲームブレークアウトのようなCanvasアプリケーションを10ほどのステップを経て作成するというもので、Canvasの作成からプログラミングまでがわかりやすいくまとめられている。ステップごとにコードを実行するウィンドウも用意されており、最後のステップでゲームとして動作するようすがわかる。 なお
画像を組み込んでいこう！
画像を組み込む！ Canvasでは、Webブラウザで表示可能な画像を組み込み表示することが可能です。Canvasは文字を描画する機能がないため、その代用として画像組み込みが重宝します。 Canvasでは、ただ単に画像をそのまま表示するだけではなく、画像の任意の領域をトリミングしたり、拡大や縮小してCanvas上の好きな場所に貼り付けたりすることが可能です。しかし、画像を組み込む場合、画像のロードが完了してから、画像の描画処理を実行しなければいけません。これを踏まえて、画像の組み込み方法を見ていきましょう。 drawImageメソッド 画像をCanvas内に組み込み表示させるためには、drawImageメソッドを使います。このメソッドには以下のように3つの引数を与えます。 ctx.drawImage(image, dx, dy); Canvasの座標(dx, dy)に、imageに格納された
JavaScriptを使って描画するCanvasとは？
Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。 手前みそで恐縮ですが、図1は筆者がCanvasを使って作った棒グラフを描くJavaScriptライブラリのキャプチャ画像です。Canvasを使うことで、簡単な図だけではなく、かなり凝ったデザインも扱うことができることがおわかりいただけると思います。 しかし、Canvasは決してFlashの代替技術ではありません。まずは、Canvasの特徴を簡単にまとめてみましょう。Canvasの特徴としては、「JavaScriptを使って描画する」「文字は描けない」「アニメーション機能がない」の3つがあり
20行のJavascript+canvasでここまでできる | 秋元@サイボウズラボ・プログラマー・ブログ
# Internet Explorer不可 OZONE Asylumというフォーラムで出された今月のお題「20行のJavascriptでできるだけ多くのエフェクトを同じスクリーンに出す」に対して出てきたすごい答がこれ。 ソースを見ると、たしかに有効な行は20行しかない。 Opera9.5とFirefox3(どっちもまだベータ)で作者の意図どおり動くとのこと。Firefox2やOpera9でも動き自体は見えるが、Firefox2では光る効果が見えなかったり。 via del.icio.us/popular この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している場合があります。移転前は現在とは文体が違い「である」調です。(参考)記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘いただければ幸いです。最新の状況を調べて新しい記事を書
３Ｄグラフ描画用JavaScriptライブラリ「Canvas 3D Graph」:phpspot開発日誌
AXXT - Web development and more Canvas 3D Graph This is Canvas 3DGraph, special type of bar graph used to plot X-Y-Z values. ３Ｄグラフ描画用JavaScriptライブラリ「Canvas 3D Graph」. ライブラリを使って次のような3Dグラフが描画できるようです。 3Dグラフというと使いどころが？な感じですが、うまい使い方を考えれば有効に利用できるかもしれませんね。 関連エントリ キュートな円グラフ簡単作成サービス Flash,JavaScript,CSS,PHPでグラフ作成のためのライブラリ色々
MOONGIFT: IEでもcanvasを「ExplorerCanvas」:オープンソースを毎日紹介
次世代のWeb技術として注目を集めているCanvas。ブラウザ画面上で絵を描いたり、2Dや3Dのグラフィックスがダイナミックに描ける技術だ。 しかし一つ問題がある。それは対応ブラウザがFirefoxやOperaに限られることだ。シェアが若干落ちたとは言え、もっとも普及しているIEが対応していないのは問題だ。そこでこれを使ってみよう。 今回紹介するオープンソース・ソフトウェアはExplorerCanvas、IE向けのCanvas実現ソフトウェアだ。 ExplorerCanvasを使うと、ブラウザ上でダイナミックな描画が可能になる。もちろん、クロスブラウザに対応し、Firefoxでも利用できる。 サンプルが同根されているので、一度試してみて欲しい。画像をダイナミックに回転させたり、細かい粒が飛び交うアクションは表現力の豊かになったWebサイトの形を連想させる。 これらをFlashなどを使って実
IEでJavaScriptのCanvasを利用するためのライブラリ「ExplorerCanvas」:phpspot開発日誌
IEでJavaScriptのCanvasを利用するためのライブラリ「ExplorerCanvas」 2007年04月23日- ExplorerCanvas Firefox, Safari and Opera 9 support the canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. IEでJavaScriptのCanvasを利用するためのライブラリ「ExplorerCanvas」。 FirefoxやSafari, Opera9ではブラウザ上で図形を描画できる Canvas クラスが存在しますが、IE にはそれがありません。 その Canvas 機能を IE に追加するライブラリが公開されました。 Canvas 同様
Purchase Intent Data for Enterprise Tech Sales and Marketing | TechTarget
Enterprise Strategy Group: Go-to-market Expertise to Help You Win
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fabric.js Javascript Canvas Library
GitHub - Arcticjs/Arctic.js: HTML5 game framework
5509.me
Purchase Intent Data for Enterprise Tech Sales and Marketing - TechTarget
Purchase Intent Data for Enterprise Tech Sales and Marketing | TechTarget