PixiJS v4The HTML5 Creation EngineCreate beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Webアプリをいまどきの手法で爆速開発した — KaoriYa
外道はるかぜちゃんジェネレータというWebアプリを いまどきな手法を用いて爆速で開発した話を紹介します。 先の3連休中、外道はるかぜちゃんジェネレータというWebアプリを開発&公開しました。ここで採用した開発手法がいまどきな爆速開発でしたのでちょっと紹介&ステマします。使った技術は以下の通りです。 AngularJS: Googleが開発しているViewModelなWeb開発ライブラリ(MVW: Model View Whateverだったかな?w) Github pages: スタティックサイトのホスティングに最適 Kii Cloud: mBaaS (mobile backend as a service) で共有データの保存に利用 HTML5 Canvas: 画像生成に。サーバサイドではなにもしてない! サービス概要 外道はるかぜちゃんジェネレータはベースとなる画像があり、そこに面白い
How You Can Build an HTML5 Photobooth App | Stormin' The Castle
You want the users of your web app to be able to use their webcam to take their own profile shots and you’d like them to be able to personalize or stylize the picture before uploading it your weberver. Or maybe you’ve seen one of those fun photobooth-type apps that takes photos, applies cool image effects to them and lets you share them… wondering how they worked.Imagine if your HTML5 app could pr
『リッチスマートフォンWebアプリのメモリ管理』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、ピグディビジョンでフロントエンドのプログラムを書いています。maginemu (@maginemu) です。 どこでもピグライフとは弊社の提供しておりますPC向けソーシャルゲーム「ピグライフ」をスマートフォン向けに移植したサービスです。『ピグライフのお庭をスマートフォンでも』を目標に移植を行いました。 (「どこでもピグライフ」はPCで「ピグライフ」を開始し、「いちごジュースを作ってみて！」というクエストをクリアするとお使い頂けるようになります) PC版ピグライフはFlashでつくられていますが、どこでもピグライフはHTML5/CSS3/J
HTML5 canvas上のイベントの位置を取得する
イベントの位置を var x = event.clientX ; var y = event.clientY ; でとると、ウインドウのドキュメントを表示している部分の 左上が原点になるので、スクロールするとずれてしまいます。 それに、canvas の左上からの相対座標になりません。 なので、 canvasOffsetX = canvas.offsetLeft; canvasOffsetY = canvas.offsetTop; var x = event.clientX - canvasOffsetX; var y = event.clientY - canvasOffsetY; としたのですが、これだと一番上までスクロールしている 状態ならOKですが、下にスクロールするとずれてしまいます。 それで、次に canvasOffsetX = canvas.offsetLeft; canvas
HTML5 と data URL scheme - しばやん雑記
最近、HTML5 について調べているんですが、いろんな場所で出てくる data URL scheme についてまとめておきたいと思います。 とりあえず data URL scheme ってのは以下の例を見てください。私の Twitter アイコンを変換してみました。 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAABGdBTUEAALGPC/xhBQAAAAFzUkdC...長すぎるので省略しましたが、data から始まって MIME の指定があって、base64 という指定があって、英数字が並んでいます。詳しくは RFC 2397 - The "data" URL scheme を見てもらうとします。 簡単に説明してしまうと画像などのリソースを base64 変換してしまうことで、HTML や J
HTML5 Canvas drawText considered harmful - simonsarris.com
I have in my possession sufficient evidence for the conviction of Canvas’ drawText(). The charge? Performance murder. I suspected drawText() of being slow ever since adding blocks of text as interactive objects to a Canvas library I am working on. I’ve also begun writing a canvas performance guidebook, so the sacrament of confirmation was doubly in order. Since most of the slowness in canvas appli
HTML5 Canvas
Running the Examples in the BookWhat You Need to KnowHow This Book Is OrganizedConventions Used in This BookUsing Code ExamplesWe’d Like to Hear from YouSafari® Books OnlineAcknowledgments The Basic HTML Page<!doctype html><html lang="en"><meta charset="UTF-8"><title>…</title>A Simple HTML5 PageBasic HTML We Will Use in This Book<div><canvas>The Document Object Model (DOM) and CanvasJavaScript and
bestvpn.org
HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an OR filter). HTML5 also presents new challenges to online privacy, so if you're at all concerned about your privacy please read my comprehensive notes on VPN Services like ExpressVPN and NordVPN. Demo Support Technology
HTML5 logo created in HTML5 using <canvas>
Desktop Opera One updates with new webpage Translator and improved Split Screen July 3rd, 2025 We're introducing a new built-in webpage translator to Opera One following your requests. We're also adding improvements to Split Screen. Mindfulness, Opera Air Opera Air’s redesigned Boosts now smoother, more intuitive June 4th, 2025 Hey all, Today we have another update for Opera Air, our browser built
2011-02-16
おひさしぶりです。いきてます。そらんです。 最近HTML5のcanvasをいじってます。そこで気付いたことがあったので書きます。というか、ネタはすごい勢いで増えてるんですが、エントリを書く暇がないｗ 本題なのですが、canvasに画像を30fpsで描画するコードを書きました。 それを書いていてわかったことは、 ・ChromeはdrawImageを実行するたびにRAMを確保する。 ・FirefoxはsrcにURLをセットしてダウンロードさせているときにRAMを確保する という挙動をすることです。どちらも本来のサイズよりかなり大きいです。そして30fpsで動かすと、これらがガベージコレクションが追い付かないまま進んでしまうので、すぐメモリを使いきってChromeならcanvasをロックして一切描画できなくなってしまったり、Firefoxならダウンロードが止まったり、ブラウザそのものが落ちたりし
Canvas で画像モノクロフィルタ - ぱいそにすたん!
コードを書いた時間より、Web サーバにアップすると動くのにローカルで動かない理由が分からなくて首をひねっていた時間の方が長かったという. Firefox のセキュリティーポリシー謎すぎ・・・. <html> <head> <title>Canvas</title> <script type="text/javascript"> window.onload = init; var img = new Image(); function init() { img.onload = filter; img.src = "test.jpg"; } function filter(){ netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); var canvas = document.getElemen
Making and Moving Selectable Shapes on an HTML5 Canvas: A Simple Example – simonsarris
Making and Moving Selectable Shapes on an HTML5 Canvas: A Simple Example I’m writing a book on HTML5, including Canvas! Click here for more information. Wait! I’ve given this tutorial a major overhaul and you should really read the new one here instead. This is part one in a series. Part 2 can be found here. This tutorial will show you how to create a simple data structure for shapes on an HTML5 c
HTML5のcanvasを使って醤油ラーメンを描いてみた！！ | HOPS Laboratory
ホップスの辻です。 今なにかと話題のHTML5。先日はcache manifest（キャッシュマニフェスト）のお話をしましたね。 HTML5のcache manifest（キャッシュマニフェスト）を導入してみよう！ HTML5の中でも今もっとも注目度の高い機能に「canvas（キャンバス）」というものがある。このタグを使うと、javascriptと組み合わせて簡単に図形を書いたり、アニメーションをしたりできます。Flashではプラグインという形でFlash Playerを入れなければいけませんが、canvasはブラウザ側が既に実装しているので何も必要ありません。 今回は今もっとも熱いcanvas（キャンバス）タグを使って、醤油ラーメンを描きたいと思います。 canvas使ってモテたい！でもその前に・・・ ようしcanvas使っちゃぞ！その前にcanvasが動くブラウザの準備です。 20
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://hellorun.helloenjoy.com/
GDD Brazil 2010 - HTML5 Demos
俺Javascript勉強会資料