GREE Engineering404 お探しのページは見つかりません GREE Engineering トップへ戻る
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. This course is designed for those new to web performance, a
サーバサイドでCanvasを利用する(node.js)
こんにちは、中川です。 今年も残すところあと１週間をきりましたね。 このところ色々と忙しかったので年末年始はゆっくりとしたいと思います。 さて、今回の話題ですが、node.jsを使ってサーバサイドでCanvasが利用できるということで試してみました。 それでは、早速使ってみましょう。 ■今回の環境 Ubuntu 10.10 node.js v0.3.1 npm 0.2.12-1 node-canvas v0.4.1 ■インストール node-canvasでは、cairoを利用しますので、事前にインストールします。 // sample.js var Canvas = require('canvas') , http = require('http'); http.createServer(function (req, res) { var canvas = new Canvas(200,20
Canvasのベンチマークテストを作って速度を比較してみた - 風と宇宙とプログラム
はじめに Canvasのパフォーマンスを測定するベンチマークプログラムはそこら中に転がっていますが、ほんの一部分の測定だったり、逆に中身が複雑過ぎたりと僕が希望するようなものが見当たらなかったので、自分で作って各ブラウザで測定してみました。 測定したブラウザのバージョンは以下です。 Chrome Firefox Safari Opera 9.0.570.1 dev 3.6.12 5.0.2 10.63 ベンチマーク 作成したベンチマークプログラムは単位時間で描画関数を何回繰り返して実行できるかという単純なものです。実行中に描画される絵のいくつかを載せておきます。 hlinebezierfill_arcfill_starsimage_scaleradial_gradient 以下に全測定項目の概要を記します。 hline ひたすら水平方向の直線を描きます。 vline 垂直方向の直線 lin
Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた - hakobera's blog
Instagram の画像フィルターみたいことを HTML5 (Canvas + File API + Drag&Drop API) で実装してみました。 Instagram みたいなの - jsdo.it - Share JavaScript, HTML5 and CSS 動作するブラウザは FireFox 3.6、Chrome 8 開発版です。(Chrome 7 は File API はサポートしていますが、どうやら iframe 内では動作しないため、上記 jsdo.it 上では動作しません。) できること これを こんな風に加工できます。 大学時代に画像処理の研究をやっていた身としては、ブラウザだけでもここまで出来るようになったのか、と少し感慨深いです。 やっていること Drag&Drop API で画像ファイルを取得 File API で画像ファイルを DATA URI 形式に変
「Canvas実習マニュアル・第零版alpha00」を公開しました - 大黒学概論
1ヶ月ほど前から、「Canvas実習マニュアル」というチュートリアルの工事を進めていたのですが、ようやく第3章まで完成しましたので、アルファテストを目的として公開することにしました。「無料チュートリアル：グラフィックス」というサイトにLaTeXのソースとPDFを置いています。現在はA4で24ページですが、完成すると40ページ前後になる予定です。 「Canvas実習マニュアル」は、HTML5のcanvas要素を使ってウェブページにグラフィックスを描画する方法についてのチュートリアルです。HTMLとCSSとJavaScriptが使える人を読者として想定しています。 誤字、脱字、間違った記述など、お気づきの点がございましたら、お知らせいただけますと幸甚に存じます。
はじめての共同作業 Canvas編 (node.js + websocket)
こんにちは、中川です。 先月無事に結婚をした開発者が一名おり、近年アシアルでは徐々に既婚者が増えてきている状況です。 ということで、結婚といえば共同作業ですよね。 今までは、一人で作業していて大変なことが色々あったと思いますが、 二人（複数）でやれば、乗り越えられることもあることでしょう。 Webアプリでも最近は、より共同作業がしやすい環境ができつつあるように思います。 そこで、今回はWebSocketを使ったリアルタイム通信でのやり取りを行い、 一緒にお絵描きができるサンプルアプリを作ってみました。 ■■■概要■■■ ・アプリ概要 ・・Canvas + WebSocket ・対応ブラウザ ・・Chrome or Safari (他、WebSocketが使えるブラウザ） ・サーバ側プログラム ・・node.js 0.2.0 ・・express@1.0.0rc2 ・・websocket-se
HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム
はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera
canvasをバイト単位で修正する方法（ImageDataの使い方） - KAYAC engineers' blog
引っ越ししました。agoです。 思いっきりネタがかぶってますが、あまり気にせずcanvasネタを書いてみたいと思います。 今回はcanvasの中でもImageData関係をまとめて見ました。 ImageDataってなに？ canvas内のバイト列を扱うためのObjectです。 canvas内の各バイト毎に赤、緑、青、透明度の情報を配列として保持しています。 何に使うの？ canvas内をバイト単位で修正したい場合に使います。 canvas内に図形等を書く場合、通常提供されているlineTo等を使用することも出来ますが、こういった抽象メソッドは一回ごとの呼び出しコストが大きいため、細かい単位の操作には向きません。 その点、ImageDataであればバイト単位での操作しかできない代わりに呼び出し毎のコストが小さいため、細かい単位の操作も高速に行うことができます。 ただ、もちろん線を引く、丸を書
Music Notation with HTML5 Canvas
I spent a few weekends trying to scratch an itch. While looking for online tools to create and render music notation, I was mildly disappointed. The only real options were crummy flash based sites or clumsy server-side image renderers. Neither of these were particularly appealing. So I pulled up my sleeves, and cooked up a full-fledged JavaScript API to engrave musical notation directly in the bro
JavaScript, Canvas スキャンライン・シードフィル アルゴリズムによる塗り潰し : Serendip – Webデザイン・プログラミング
HTML5 Canvas でバケツツールによる塗り潰しを実現するために、スキャンライン・シードフィル (Scan Line Seed Fill) というアルゴリズムを使ってみた。 アルゴリズムの詳細については、以下のサイトを参考にした。 参考：ActionScript入門Wiki@rsakane – 塗りつぶしアルゴリズム(スキャンライン – シードフィル編) ペイント・ルーチン (1)シード・フィル アルゴリズム 単純に言えば、水平方向に塗り潰し可能な範囲を探して塗り潰してゆき、それを塗り潰し可能な範囲が無くなるまで上下方向に繰り返していくといったもの。 JavaScript, Canvas スキャンライン・シードフィル アルゴリズムによる塗り潰しデモ 塗り潰し処理のコード var fillColor = function(startX, startY, imgData, penColo
JavaScript, Canvas で putImageData による劣化を調べる : Serendip – Webデザイン・プログラミング
Ubuntu 9.10 (karmic Koala) の Google Chrome で JavaScript, Canvas の putImageData を使ってイメージの書き戻しをしていたら、イメージの色がどんどん黒っぽく変化してきた。 こちらのサイト『りす穴さくら: lislis Paintの技術的説明まとめ』によると Google Chrome では putImageData によって色が微妙に変化するので、透明な Canvas を新しく作って描画し、 drawImage で元の Canvas に書き出すという方法で対処できるらしい。 そこで、各ブラウザによってどの程度劣化するのかを putImageData と drawImage を使ってテストしてみた。 テストしたブラウザとそのバージョンは以下のとおり。 Windows Google Chrome 5.0.342.9 bet
HTML5のCanvasに欠けているもの：フレームワーク － ＠IT
OSSプロジェクトのホスティングサイト「GitHub.com」では、Flashで実装されていた一部のUIをCanvasに移行したという HTML5のCanvasとFlashの最大の違いは、アニメーションなどを行うために利用できる抽象レベルだ――。こう指摘するのは、Gitベースのコードホスティングサービス「GitHub.com」の共同創業者、Tom Preston-Werner氏だ（ちなみにWerner氏はマイクロソフトに買収された検索ベンチャー「Powerset」の元社員で、買収直後に“サラリー以外に3年間で30万ドル（約2770万円）”というおいしいオファーを断ってまでGitHub.comのフルタイム開発の道を選んだことでも知られている）。 Flashで書かれた一部のUIを全面的にCanvasで書き直した経験からWerner氏は、Canvasにはまだ抽象度の高いフレーワムワークが欠けてい
HTML5でSymmetric Nearest Neighbor – Rest Term
var Class = { create : function() { var properties = arguments[0]; function self() { this.initialize.apply(this, arguments); } for(var i in properties) { self.prototype[i] = properties[i]; } if(!self.prototype.initialize) { self.prototype.initialize = function() {}; } return self; } }; var Bitmap = Class.create({ initialize : function(source, context) { this.bitmapData = new Image(); this.bitmapDa
NUTSU » [f5]HTML output test.
昨日のエントリ「SVG出力」に続いて HTML Canvas に出力してみるテストです。単純に Canvas を使ってみたかっただけなんですが、ものは試しということで。とはいえ役には立たないローテクであります。 上の画像は試作のキャプチャなのですが、左のSWFで描画している内容を ENTER_FRAME で 描画JSを ExternalInterface.call() する、といった内容です。同じ絵ができるだけ、なのですが。 試作は以下のURLからご覧ください。こちらノリで作っているモノなので動かない場合はご愛敬です。Winの Chrome と FireFox は普通に動いてましたが、Mac は未確認です。もちろんIEはスルーです。 html out test( canvas api required ) 予想よりも動作が快適でありました。SVGと同様に線幅は Canvas の方が細かく表
CanvasとWebSocketsでみんなでウロウロする
火曜日担当のkomagataです。 Metasploitは一回お休みさせていただいてJavascriptのお話しです。 仕事は主にwebプログラミングなので身も蓋も無い言い方をすると「DBに入れたり出したり」しかしてません。 「もう文字列処理はうんざりなんだよ！」 というのは嘘ですが、たまには動きのある見栄えのするグラフィックとかアニメーションとかプログラムしてみたいと思い、HTML5で使えるようになるらしい、グラフィック機能のcanvasと双方向同期通信のWebSocketsを使ってキャラクターがウロウロするだけのプログラムを作ってみました。 WebSocketsを実装しているのは現状Google Chrome 4以降だけなので、動作してる雰囲気を伝えるために動画にしてみました。 最近のChromeには実装されているので下記のように簡単にサーバーに接続することができます。 ws = ne
HTML5 Canvas のarcTo関数の実装が未だにorz - 風と宇宙とプログラム
２年近く前にCanvas APIの実装状況を網羅的に調査したことがありますが、ブラウザごとに実装がいろいろ異なっていていました。その中で一番目立ったのがarcTo関数の実装の違いです。改めて調べてみました。 ブラウザのバージョンは以下です。 Chrome Safari Opera Firefox 4.0.249.43 4.0.4(531.21.10) 10.10 3.5.7 IEはExplorerCanvas r3を見てみましたがarcToは実装されていませんでした。 テストケース 今回、新たに簡単なテストケースを作りました。左図のような絵を描画するものです。arcToだけを使って描画しています。ちょっとキモイ絵になってしまいした。 Chromeではこうなります まあまあですが、描かれるべき線と左目の点がありません。 左目の点がないのは、arcToの問題もありますが、さらに長さゼロの線に対
とあるjavascriptの画像生成
元ネタ：とある櫻花の画像生成、とある画像の自動生成<ジェネレータ> HTML5のcanvasを使ってやっつけ仕事。グラデーションは面倒なのでやめた。SilverLightやサーバーサイドは、もはや過去の遺物である。これからはクライアントサイドのみで、これぐらいやるのが当たり前になるべきだ。フィード経由で閲覧している人は、ご面倒ではございますが、直接見ていただいくようお願いいたします。 主要ブラウザでテストしてみた結果。 Chrome, Safari: 完璧 Firefox: なぜか@ＭＳ ゴシックが意図通りに描画されない。 Opera: canvasの文字列描画をサポートしていない。 IE: えーと……とりあえずお前はカエレ。 グラデーションは、思いのほか簡単だった。 Anonymous said... 私はWindowsでSafari 4を使っていますが、振り仮名（インデックス）の部分が
Canvasでローレンツアトラクタ - by edvakf in hatena
pythonでローレンツアトラクタ（オイラー法） - yattの日記 この記事に刺激されて JavaScript でローレンツアトラクタを書いてみた。 ただ書くだけじゃつまらないので、Canvas を使ってちょっと趣向を凝らしてみた。 Lorentz Attractor with Canvas Sylvester という、2次元3次元のベクトル演算を扱う JavaScript のライブラリを使って、実際にプロットする部分は Sylvester をグラフに出力できるプラグインみたいなものを自作した。自作部分はパブリックドメイン。 Opera, Firefox, Chromium, Safari で動作確認した。id:uupaa さんの uupaa-excanvas.js をロードしてあるので、もしかしたら IE でも動くかも。(動いたら教えてください) あ、そうそう、WebGL が使えるよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Changeset 73119 – WebKit