HTML5.JP - 次世代HTML標準 HTML5情報サイト

2007/08/13 2715 users HTML5.JP canvas 策定 トピック HTML

次世代HTML標準 HTML5情報サイトHTML5は、W3CがHTML4に代わる次世代のHTMLとして策定を進めているHTML仕様です。HTML5.JPでは、HTML5の仕様に関するトピックを紹介していきます。 HTML5.JPでは、HTML5の最新情報に加え、すでに利用可能なCanvasの使い方などを詳しく解説します。 HTML5.JPの目的 HTML5.JPでは、HTML5に関する情報をわかり... 続きを読む

微分ってなあに？（表紙）

2012/06/10 976 users 微分 canvas 図形 表紙 ブラウザ

高校で微分を勉強したものの、「なんだかわからないけどただ計算方法だけ覚えた」という困ったレベルに留まっている人は（残念ながら）多いようです。 まずは「微分って何なのか」を図形で理解して欲しいと思います。そこで動く図形で、微分の雰囲気を知って欲しいと思います。 すいません、あなたのブラウザはcanvasをサポートしてないようです。 その１から順に読んで、動かしていってください。 続きを読む

まずは基本から・HTML5のCanvasについて参考になったサイトまとめ - かちびと.net

2010/06/23 775 users canvas HTML 先延ばし エントリー net

ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、... 続きを読む

HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌

2011/08/08 613 users チュートリアル phpspot開発日誌 canvas 実装

Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコ... 続きを読む

『canvas』要素の勉強をする時の参考サイトまとめました / HTML5『canvas』要素基礎 | HTML5でサイトをつくろう

2011/08/18 601 users canvas 標題 Canvas要素 サンプル 要素

HTML5の『canvas』要素 今回の標題でもあるcanvas要素は、HTML5の新要素の中で最も注目されている要素の1つなので、私もこれから学習していくのがとても楽しみです。 まずcanvas要素について知るために参考サイトを見つけることから始めました。調べるとすぐにサンプルなどが数多くヒットし、その中には目を奪われる表現や複雑な処理を行っているモノがいくつもありました。また、サンプルは非常に... 続きを読む

要約 : Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話 | fixture.jp

2012/09/23 473 users JPEG canvasタグ 要約 実装 canvas

要約 : Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話 September 19, 2012 Posted by lowply 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイ... 続きを読む

まだまだ間に合うCanvasでアニメーション入門（まとめと実践） :: 5509

2010/12/22 464 users canvas jQuery アウトプット さわ jsdo.it

JavaScript Advent Calendar 2010も22日目！あと3日ですよ。僕はちょうど学んだばかりのCanvasをアウトプットもかねて、まとめと実践を書いてみます。知ることと行うことは同一である、最近行ったセミナーでも言ってました。 jsdo.itにはほんまにこれCanvasなん？なサンプルいっぱいありますね。あーいうの書けるようになりたいなぁとか思いつつ、jQueryばっかりさわ... 続きを読む

HTML5エンジニアなら抑えておきたい！初期型から最新のスマホ端末まで、ブラウザのCanvas/CSS3描画パフォーマンス徹底検証 | ICS LAB

2013/05/27 442 users canvas iOS ICS池田 新旧 ICS LAB

こんにちは、ICS池田です。スマートフォンのブラウザでリッチコンテンツを作る場合に気になるのはパフォーマンスではないでしょうか。そこでiOSやAndroidの新旧様々な端末を使ってパフォーマンスを検証してみました。 描画テスト 画像のオブジェクトをどのくらいの個数を表示できるか測定しました。少ない数から表示していき、どのくらいまで多くのオブジェクトを表示できるかという形で検証しています。 特に比較... 続きを読む

今更聞けないcanvasの基礎の基礎 : tech.kayac.com - KAYAC engineers' blog

2010/04/26 433 users canvas KAYAC engineers nagata

はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 Op... 続きを読む

HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/12/11 427 users canvas KAYAC DESIGNER Blog

動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました... 続きを読む

ロゲ会長ジェネレータ

2013/09/10 421 users canvas ジェネレータ ロゲ会長 モダンブラウザ かなり

ロゲ会長ジェネレータです。ロゲ会長が発表してくれます。ロゲ会長のジェネレータです。かなり急ごしらえでつくったので出来は荒いです。IEとかちゃんとテストしてません。ちなみにHTML5でcanvasがチャント動くモダンブラウザじゃないとダメです。 続きを読む

HTML5でスマホアプリを作ってみよう。第１回「じゃんけんゲーム」 - もとまか日記

2012/05/20 418 users じゃんけんゲーム スマホアプリ HTML5 もとまか日記 割愛

以前から書いてる、以下の開発向け簡単チュートリアル。 iPhoneアプリを作ってみよう（Xcode4編）第１回：じゃんけんゲーム 今回は、これをHTML5のCanvasで作ってみました。 で、ついでにチュートリアル的な内容を書いてみたメモ。 前提条件 前提条件として、ある程度HTML等が分かる人向け、という感じです。また、レンタルサーバの利用等についても割愛です。 その辺の詳細な説明は省いてるので... 続きを読む

地獄のミサワがCSS3の勉強に最適と話題に | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

2011/02/15 397 users ミサワ カヤック KAYAC DESIGNER canvas

CSS3に興味はあるけど、きっかけが無いなあと思っている方へこんにちわ、jsdo.it担当のふちがみです。最近jsdo.itで地獄のミサワをイジりながらCSS3やcanvas、javascriptを学ぶ動きが活発なんです。「それ2年ぐらい前に見たわー」という方も続きからどうぞ！一瞬でわかるまとめフロントエンジニアたちが地獄のミサワに夢中 - togettercanvasで描かれたミサワ 続きを読む

canvasでキラキラした背景を作る方法 | tech.kayac.com - KAYAC engineers' blog

2010/05/14 380 users canvas KAYAC engineers 野郎 属性 ボク

tech.kayac.com、ささやかにリニューアルしました！ tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。 最初なので、、、 簡単にぼくの属性を説明すると、html5とか好き、CSS3... 続きを読む

ヒッグス粒子ってなあに？

2012/07/23 379 users ヒッグス粒子 canvas 数式 アニメーション 意図

このファイルは 高校生程度の知識を持っている人向けに、図とアニメーションで「ヒッグス粒子って何なのか、を雰囲気だけでも理解してもらおう、という意図で作りました。 ごめんなさい、あなたのブラウザはcanvasをサポートしてないようです。 数式などは使っていませんが、　ヒッグス粒子って何なのか、を理解するために必要なのは、 続きを読む

HTML5でゲームを作りたい時に参考になりそうな記事のメモ - もとまか日記

2012/05/27 371 users メモ 参考 HTML5 ゲーム もとまか日記

先日以下を書いたところ、 HTML5でスマホアプリを作ってみよう。第１回「じゃんけんゲーム」 あまり深く考えず「第１回」ってしちゃってたので(^^;;何かネタを考えないといけないなー・・・・ てことで、HTML5のCanvasを中心に、その他もろもろ、ゲーム作成に関連しそうなことについて色々調べてみたメモ。 HTML5全般について以前、以下でまとめた。前から気になってたHTML5について色々調べて... 続きを読む

こいつはすごい・・・JavaScript＋Canvasで顔認識機能を実現だと・・・？！ - IDEA*IDEA ～ 百式管理人のライフハックブログ

2010/11/04 350 users IDEA canvas こいつ つか デモ

うわ、すごいすね。これ。CanvasとJavaScriptでOpenCVちっくな顔認識機能を実現しています。 デモを試してみましたが顔が検出されるとそこを赤い枠で囲ってくれます。いくつか例をば。 ↑ おー、すごい！つか、かわいいな！ｗ ↑ 顔が小さすぎると検出されませんでした。 ↑ どうしてこうなったｗ。 ある程度のサイズがないと失敗するようですが、それでもすごいですね。もちろんプログラムを変えれ... 続きを読む

Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit

2018/07/16 346 users Crieit canvas CodePen CSS HTML

ブラウザで見ることができる3Dアクアリウムを作ってみました。 これは基本的にはHTMLとCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。 記事の最後に操作できるCodePenを配置してあるので読むのが面倒な... 続きを読む

クッキーより怖いcanvas fingerprintingって何？迂回方法は？ : ギズモード・ジャパン

2014/07/28 308 users ギズモード クッキー canvas YouPorn ジャパン

ニュース クッキーより怖いcanvas fingerprintingって何？迂回方法は？ 2014.07.28 16:00 問題：ホワイトハウスとYouPornが共通でもってるもの、なーんだ？ こたえ：canvas fingerprinting 「canvas fingerprinting（canvasの指紋採取）」というのは、最近大手サイトで採用が広まってる新手のオンライン追跡ツールのことです。... 続きを読む

JavaScriptで図形を描くHTML要素「Canvas」の実例 - GIGAZINE

2007/01/11 303 users GIGAZINE canvas Ajax Dashboard

JavaScriptを使ったAJAXが昨年前半まで大いに注目を集めていましたが、その根本になったJavaScript自体は古くからあり、AJAXというのは新しい応用法みたいな側面が非常に強かったのが特徴です。 しかし今回紹介する「Canvas」要素はそういうのとは明らかに一線を画しています。グラフの描画、写真合成、アニメーションなどが可能で、実際にはMac OS X のDashboardに初導入さ... 続きを読む

HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム

2010/08/15 302 users 宇宙 プログラム HTML5 Canvas ブラウザ 現状

HTML5 はじめにCanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。調べたブラウザの各バージョンは以下の通りです。FirefoxChromeSafariOpera 3.6.8 6.0.490.1 dev 5... 続きを読む

HTML5花火大会から学ぶcanvasの表現力 | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2011/07/07 301 users canvas KAYAC DESIGNER 描画 夜空 大半

HTML5花火大会が始まりました！ jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています！ 本当にどの花火もクオリティーが高くて、見るだけでも楽しめます。 HTML5花火大会 花火のコードから学ぶcanvasの表現力 花火のコードの大半はHTML5のcanvas要素を使って描画されています。 canvasってなんだっけ？ javascriptから自由にグラフィックを描画で... 続きを読む

これは見ておくべきHTML5のCanvasを使ったデモ集:phpspot開発日誌

2010/09/09 299 users canvas Nettuts phpspot開発日誌 満載

21 Ridiculously Impressive HTML5 Canvas Experiments | Nettuts これは見ておくべきHTML5のCanvasを使った実験集。 ここまで出来るの？っていうサンプルが満載で一度は見ておきたいものばかりです。 8 Bit Color Cycle Particle Letter Animation Particle System Strange A... 続きを読む

[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map | コリス

2014/05/16 282 users はいら クリッカブル jQuery canvas コリス

日本の都道府県の地図をクリッカブルマップで表示する純国産のjQueryのプラグインを紹介します。 地図自体はCanvasで描かれているので、画像を用意する必要はありません。 Japan Map Japan Map -GitHub Japan Mapのデモ Japan Mapの使い方 Japan Mapのデモ デモはCanvas対応ブラウザでご覧ください。 デモページ 各都道府県をホバーするとハイラ... 続きを読む

Google、日本の小中高校生に「Raspberry Pi」でプログラミング実習を開始 -INTERNET Watch

2013/10/29 277 users Raspberry Pi INTERNET Watch

ニュース Google、日本の小中高校生に「Raspberry Pi」でプログラミング実習を開始 コンピューターサイエンス教育支援でCANVASと協力 （2013/10/29 16:38） Googleは29日、日本のコンピューターサイエンス教育を支援する「コンピューターに親しもう」プログラムを開始した。 「コンピューターに親しもう」プログラムは、6～15歳の児童・生徒を対象に、コンピューターやプ... 続きを読む