IDEA * IDEAドットインストール代表のライフハックブログ
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
Old School Color Cycling with HTML5 | EffectGames.com
Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to
Doug McInnes
Press Space to fire, the ← and → arrow keys to turn, and the ↑ arrow key to thrust. Press P to pause, F to toggle the framerate display and hold down G to see a demonstration of the Grid System. Suggested browsers: Safari, Chrome, Firefox and Opera. This game will NOT work in IE because it doesn’t support the canvas element. More Info About this Game
canvasでキラキラした背景を作る方法 - KAYAC Engineers' Blog
tech.kayac.com、ささやかにリニューアルしました！ tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。 最初なので、、、 簡単にぼくの属性を説明すると、html5とか好き、CSS3とか好き、canvasとか興味ある、非モテ、javascriptはjQueryがなんとなくわかる程度、非リア充。こんな感じです。 今回のリニューアルではコーディング全般を担当しました。 特に、プログラミングに関してはド素人だ！ということを強調しておきます。 そんなぼくが、canvasを使ってキラキラした背景を作ってみました 「リニューアルするからには新しいことがやりたいよね。だったらhtml5とc
Akihabara
Credits for music artists are on staff rolls of each games and here. Feel brave? So you're ready for the Dark side of Akihabara with experimental material! Uh-uh-uh! HTML5 is my Arcade. Akihabara is a major Tokyo shopping area for electronic, computer, anime, and otaku goods. You can find any sort of old & new videogames, starting from the 8-bit era to modern motion-sensing videogames. But is also
今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
CurlとHTML5のcanvasを比較する 2次元グラフィックスの応用例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>グラデーション（縦）</title> <script type="text/javascript"> onload = function() { draw(); }; function draw() { var canvas = document.getElementById('base'); var context = canvas.getContext('2d'); context.beginPath(); var linerGrad = context.createLinearGradient(0, 0, 200, 0); … 2 linerGrad.addColorStop(0.0, "#C05050"); … 3 linerGrad.addColorSt
とあるjavascriptの画像生成
元ネタ：とある櫻花の画像生成、とある画像の自動生成<ジェネレータ> HTML5のcanvasを使ってやっつけ仕事。グラデーションは面倒なのでやめた。SilverLightやサーバーサイドは、もはや過去の遺物である。これからはクライアントサイドのみで、これぐらいやるのが当たり前になるべきだ。フィード経由で閲覧している人は、ご面倒ではございますが、直接見ていただいくようお願いいたします。 主要ブラウザでテストしてみた結果。 Chrome, Safari: 完璧 Firefox: なぜか@ＭＳ ゴシックが意図通りに描画されない。 Opera: canvasの文字列描画をサポートしていない。 IE: えーと……とりあえずお前はカエレ。 グラデーションは、思いのほか簡単だった。 Anonymous said... 私はWindowsでSafari 4を使っていますが、振り仮名（インデックス）の部分が
BackgroundCanvas(-webkit-canvas / document.getCSSCanvasContext相当)の機能を実装してみた - latest log
WebKit の先進的な機能(background: -webkit-canvas) にかなり近い機能 -uu-canvas を実装してました。 <!doctype html><html class="ifnojs"><head><meta charset="UTF-8" /><title></title> <style> div.nodebox { -uu-background: -uu-canvas(ident) no-repeat; width: 600px; height: 400px; border: 0px none; } </style> <script src="../../uupaa.js"></script> <script> function xcanvas() { uu.css3.bgcanvas.redraw("ident", draw); draw(); } f
JavaScriptを使って描画するCanvasとは？
Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。 手前みそで恐縮ですが、図1は筆者がCanvasを使って作った棒グラフを描くJavaScriptライブラリのキャプチャ画像です。Canvasを使うことで、簡単な図だけではなく、かなり凝ったデザインも扱うことができることがおわかりいただけると思います。 しかし、Canvasは決してFlashの代替技術ではありません。まずは、Canvasの特徴を簡単にまとめてみましょう。Canvasの特徴としては、「JavaScriptを使って描画する」「文字は描けない」「アニメーション機能がない」の3つがあり
Twinkle - split screen | Mathieu 'P01' HENRI | 20080427
Twinkle - 20 lines JavaScript contest - Split Screen by Mathieu 'p01' Henri April 2oo8. The specification of Canvas being in progress, this script is best rendered in a recent browser such as Opera 9.5 or Firefox 3. These animations require a decent browser such as Opera 9.5 or Firefox 3. No really I meant it.
Canvas tutorial - MDC
このチュートリアルは、 <canvas> 要素を使用して二次元のグラフィックを描画する方法を、基本から説明します。ここでの例は、キャンバスで何ができるかを明確に示すものであり、独自のコンテンツを作成するためのコードスニペットも提供しています。 <canvas> は HTML の要素であり、スクリプト（ふつうは JavaScript）を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成したり、簡単なアニメーションを作成したりすることができます。 <canvas> は Apple が macOS Dashboard のために WebKit に初めて導入した後、ブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。 <canvas> を使うのはそれほど難しくはありませんが、 HTML と JavaScript の基本的な理解が必要です。一部の
HTML5先取り！CanvasならFlash不要で絵が描ける (1/3)
現在主流のHTML 4.01が勧告されたのが1999年12月。その後もWebは進化し続け、HTML+CSS+JavaScript（≒DHTML）でできないことはFlashやSilverlightで補うことで、さまざまな表現が可能になっています。たとえば、ユーザーの操作で画像の位置などが変化するゲームや、刻々と変化するデータを外部が取り込んで図形を描く株式市場の相場グラフはFlashを使うのが一般的ですが、できればHTMLやJavaScriptだけで済ませてしまいたいもの。そこで今回は、HTML5の新機能「Canvas」を使い、Webページ上にJavaScriptで図形を描画する方法を紹介します。 Canvasってナニ？ 2010年の勧告を目指してW3C（World Wide Web Consortium）で策定中のHTML5では、「Canvas」という新しいHTML要素（タグ）が追加される
Canvas Tutorial - Introduction
Welcome! In this tutorial, we're going to create a breakout clone that you can play in your browser, using javascript and the <canvas> element. In order to use this tutorial, you'll need a browser that supports the <canvas> element. Before you read any further, click on the "run code" button on the left to play the game that we'll end up creating. On every page, you'll be able to click the "run co
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Canvas Cheat Sheet
blog.wonder-boys.net is Expired or Suspended.
http://www.kaarellumi.com/asylum/html/dyn10_3.htm
サービス終了のお知らせ