canvasのサイズ指定 - Qiita
canvasのデフォルトサイズは、幅300px、高さ150px。 canvasのサイズを変更したい場合は、canvasタグのwidth属性、height属性を変更しなければならない。cssでスタイリングすると、canvasのデフォルトサイズからの相対サイズになってしまうため、canvas内に描画した画像が引き伸ばされることになる。 canvasをフルスクリーンで表示したいとき <div class="wrapper"> <canvas id="canvas"></canvas> <!-- .wrapper // --></div>
WebGL Water
Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytrac
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光
こくちーずプロ - 無料で使えるイベント・セミナーの告知・集客サービス
個人から法人まで幅広い主催者の方にご活用いただいています。 イベント主催者6万人以上 チケット販売320万枚以上
Read files in JavaScript | Articles | web.dev
Read files in JavaScript Stay organized with collections Save and categorize content based on your preferences. How to select files, read file metadata and content, and monitor read progress. Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, uploading photos
備忘録 File APIを利用してファイルアップロード
「5000枚の写真をアップロードできるWebアプリがほしい」と無茶な依頼があったので、HTML5のFile APIを使ってサンプルを作ってみました。 サンプル） http://5463440d.dotcloud.com/ ソースコード） https://github.com/jou4/multi_fileupload ※上のサンプルは、サーバーが受け取ったファイルを保存しないのでアップするだけのものです。 ※またリクエストのサイズも制限されているので、大きなファイルはアップできません。 ドラッグ＆ドロップは、ondragover, ondragend, ondropといったイベントで制御します。 jQueryを使うのであれば、bindメソッドを利用してこんな感じでしょうか。 $("#holder") .bind("dragover", function(){ this.className
Read files in JavaScript | Articles | web.dev
Read files in JavaScript Stay organized with collections Save and categorize content based on your preferences. How to select files, read file metadata and content, and monitor read progress. Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, uploading photos
JavaScriptでローカルファイルを自在に操る - File API
※ただし、SafariではFileReaderオブジェクトを、Internet Explorer 10ではreadAsBinaryStringメソッドをサポートしていません。 TIPS 053：ファイルの名前／種類／サイズを取得する Fileオブジェクトを利用することで、ローカルファイルの情報にアクセスできます。 例えば以下は、<input type="file">要素で指定されたファイルの名前やサイズなどを表示するサンプルです。 ［リスト01］ファイルの情報を取得するコード（fileinfo.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <script> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" />
Chromeにてアップロードファイルにフォルダを指定するinputタグの記述例 - 強火で進め
Chromeの場合は以下の様に webkitdirectory と directory を付ける(directoryは省略してもOK。仕様が確定してからは webkitdirectory の代わりに directory が使われる様になるのだと思われます)とアップロードするファイルの指定としてフォルダが選択できます。実際にはフォルダ内のファイル全てがアップロードされる形になります。 <input type="file" webkitdirectory directory /> 実際のコードとしてはこんな感じになります。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"> <head> <meta http-equiv="content-type" content=
Blog
明示的 意味 แพลตฟอร์มการเรียนรู้และพัฒนาทักษะด้วยเทคโนโลยี https://suin.io เป็นแพลตฟอร์มที่ให้คุณเรียนรู้และพัฒนาทักษะทางเทคโนโลยีอย่างสะดวกสบาย เรามุ่งมั่นในการให้ความรู้และประสบการณ์ที่มีคุณค่าในการพัฒนาตนเอง pascalcase
ハロウィーンということでHTML5で動くパーティー用のVJツールを作ってみました
Tweet2013 - 10 - 27 Happy Halloween VJもうすぐハロウィーンですね。 みなさんは、ハロウィーンパーティーなどに繰り出して、パーティーを盛り上げていることだと思いますが、ハッカーのはしくれは技術でハロウィーンを盛り上げます。 というわけで、ハロウィーンのパーティーとかで使えるVJツールを作ってみました。 Happy Halloween VJ » http://halloween.ryooopan.com スクリーンショットはこんな感じ。 ブラウザは今のところChromeをサポートしています。（他のブラウザだとうまく動かないかも） マイクをONにすると、周りの音を拾ってきていい感じにエフェクトがかかる感じになっています。 特にパーティー会場でプロジェクターとかで写すといい感じです。 HTML5 + Canvas実装はすべてHTML5で書いてます。 ちなみに画
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
スマホアプリ業界の規模は、ふりかけ業界の5分の1以下—「市場規模マップ」が面白い｜まだ仮想通貨持ってないの？
これいいですねー。新規事業とかのアイデア出しに使えそう。 市場規模マップ (HTML5版) 市場規模をマッピング 市場規模マップは、その名の通り市場規模をマッピングしたもの。前年比マイナスの業種は赤背景になっています。データはxlsファイルでダウンロードすることもできます。 このマップ、なかなか高性能でして、「前年比ゲージ」をいじると、 対前年比で伸びが顕著な業種だけをビジュアライズすることができます。ソーシャルゲーム、太陽光が伸びてるようですね。 市場規模でもマッピングを切り替えられます。 SEOってふりかけ市場の半分以下なのか…。スマホアプリに至っては5分の1です。データの中身をよく見る必要はありますが、とりあえずふりかけ業界巨大すぎる。 というわけで、何か事業のヒントが掴めると思いますので、ぜひお試しあれ。 市場規模マップ (HTML5版)
Triangulation Image Generator - jsdo.it - Share JavaScript, HTML5 and CSS
ファイルをドロップしてリソースを変更可能 クリックで次のプリセット画像へ 2012.10.2 エッジのポイント検出の部分に誤りがあったので修正 速度向上のためにコードを最適化 Photo from http://www.sxc.hu/ http://www.flickr.com/ // forked from akm2's "エッジ検出のテスト" http://jsdo.it/akm2/89lF (function(window, document) { 'use strict'; // Configs // (int) 0~255 明るさの平均からエッジを検出する際の最小値を示す, この明るさを超えるピクセルを検出する, 少ないほど詳細 var EDGE_DETECT_VALUE = 50; // (number) エッジ上のポイントの分布比率, 高いほど詳細, 生成されたポイント数はコ
iOSプログラマへ。HTML5 Canvasがおもしろい！ | DOTAPON Blog
…という題で、発表してきました。 さいたま開発勉強会 vol5です。 iOSのCore Graphicsと共通点の多いHTML5 Canvas。 iOSプログラムの経験がまるごと活かせるぜ！面白いものつくろうぜ！ ということをお伝えしたく、実際に手を動かす場面を取り入れてみました。 実際に効果があったかどうかは…わかりません (^^;) 入門的な位置づけに仕上げてみましたので、iOSプログラマの方もそうでない方も、ぜひ触ってみてください。 iOSプログラマへ。HTML5 Canvasがおもしろい！ from cocopon 練習用の「HTML5 Canvas スターターキット」はこちらから。 マウス・タッチイベント両対応のInputManagerが付属していますので、ぜひご活用ください :) CanvasStarterKit_100.zip
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Unleash The Future
HTML5とか勉強会 in SENDAI 2014 (#html5jsendai)
Engadget | Technology News & Reviews
cmmntr.com
仙台でウェブクリエーティブのための学園祭「dotFes」－東北初開催