canvas lineToなどの描画がずれる！？ マウスで描いてみた。
javascriptでマウスクリック、ドラッグでお絵かきできるものをつくっていた時のこと、 マウスの位置に線画かけない！ぜんぜん違うところに描いてしまう！？ デバッグしながらなんでか全くわからない状況。マウスイベントでは正しいポジションを返しているにもかかわらず。 ぶっちゃけびっくりしたんだけど、 canvasはCSSでサイズを指定してはいけない！ じつはcanvasの要素でwidth、heightを指定していないとデフォルトで300px - 150pxになると。 それを単にCSSで引き伸ばした（縮小した）状況になるのだ。 canvasが画像だと思えばこの状況が理解できたかもしれない。 ハマったハマった。 参考http://mitublog.blog.eonet.jp/default/2010/08/html5-15b1.html
HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアの店長です。 先日記事が出てましたが改めて自己紹介します。 大学卒業後はカフェで仕事をしていたのですが、退職して1年半ほどWebデザイナーをしていました。そして、LIGにはフロントエンドエンジニアとしてジョインすることに。 お察しのとおり、店長というアダ名はカフェで働いていたためです。 今後ともよろしくお願いします。 さて、今回はHTML5のHistory APIについてお話したいと思います。 History APIについて History APIには以前からブラウザの履歴（スタック）を行き来する機能があったのですが、HTML5でさらに以下のような機能が追加されました。 画面を遷移せず、履歴に新たなURLを追加する。 現在のページの履歴を変更する。 ブラウザの戻る・進むボタンをクリックしたときにイベントを検知する。 このような機能がどんな場面で使われてい
[HTML5] Canvasの内容をLocalStorageで保存／読み込み - YoheiM .NET
HTML5のCanvasを用いて、絵を描くWebアプリケーションを前に作りました。 そのお絵描きWebアプリケーションに、HTML5のLocalStorageを利用した 一時保存機能を追加しました。 今回はその実現方法をブログに残しておきたいと思います。 http://www.yoheim.net/labo/html5/canvas/freeHandWrite2.html Canvasの内容をLocalStorageに保存する Canvasでは、内容をbase64エンコーディングすることで、文字列をして取得出来ます。 それで取得した文字列をLocalStorageに保存する。 // Canvasからbase64エンコーディングされた画像データを取得する var canvas = document.getElementById("myCanvas"); var base64 = canvas
JavaScriptで画像のクラスタリングによるドット絵風加工 – Rest Term
pixel clustering using k-means++ 前回のJavaScriptでPoisson Image Editingによる滑らかな画像合成に引き続き、HTML5 Canvasを使ったJavaScriptによる画像処理の一例を紹介します。 今回は画像の画素値に対するクラスタリング(分類)を画像加工用途に応用します。クラスタリングには各画素のRGB値を特徴ベクトル(次元数3)としてk-means法と呼ばれる手法を使って行います(実装上はk-means法の初期値選択アルゴリズムを改良したk-means++法を利用)。以下のサイトでOpenCVを利用した実装例が紹介されています。 k-meansクラスタリングによる画像分割，減色 – opencv.jp 上記サイト内でも言及されているように、k-means法による画像の領域分割や減色処理はあまり良い結果が得られないことが知られて
Canvasで描画した画像を送信してサーバに保存する - Qiita
タイトルどおりのことをやった際の実装時メモ。 Canvasから画像を取得 2通りの方法が見つかった。 Base64への変換 Blobへの変換 Base64への変換 canvas.toDataURL()を呼び出すだけで取得可能であるが、 画像サイズに比例した巨大な文字列となり、変換によって元サイズより33%データ量が増える。 取得したBase64を<image>のsrcに指定すれば画像表示され、 <a>のhrefに指定すればリンククリックでダウンロードできてこれはこれで便利。 Blobへの変換 canvas.toBlob()を呼び出すだけで取得可能。 Blob形式で表現すれば、createObjectURL(blob)によりURL参照が取得できるので、 画像サイズに依存せずメモリ使用量を抑えられるらしい。（未確認) これは便利と思いきやcanvas.toBlob()はFirefoxでのみサポ
Canvasの画像(スクリーンショット)をローカルダウンロードします。 - jsdo.it - Share JavaScript, HTML5 and CSS
Canvasの画像(スクリーンショット)をローカルダウンロードします。 Arrayをblobオブジェクトに変換します。 blobオブジェクトをローカルダウンロードします。 Base64をblobオブジェクトに変換します。 function screenshot() { var canvas = document.getElementById("canvas"); var base64 = canvas.toDataURL(); // firfoxならtoblobで直接blobにして保存できます。 var blob = Base64toBlob(base64); saveBlob(blob,"default.png"); } var onload = function() { // 描画 好きなもの書いて～ var canvas = document.getElementById("canv
iPhoneやAndroidでjQueryを使ってブラウザの一番下まできたら自動的に読み込む
iPhone や Android で Twitter のタイムラインのようにブラウザで一番下まできたら自動的に “続き” や “次の○件” を読み込みたいことがあります。 今回はこのやり方を紹介します。今回はスマホだけなので WebKit ベースのブラウザ（Safari, Chromeなど）にしか対応しません。 先人たちのアプローチを試す 1. jQuery.bottom プラグイン jQuery のプラグインでは小粋空間さんで紹介されている jQuery.bottom プラグイン が有名なようです。 TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」 – 小粋空間 このプラグインでは、jQuery オブジェクトに bottom 関数が追加されるので、これに関数を設定すると、ブラウザで最下部まできたときに
HTML5 Canvasで動かせる3次ベジェ曲線を描く
HTML5 のキャンバスでは bezierCurveTo メソッドを使ってベジェ曲線を描くことができます。 今回はこれを使って、Illustratorなどのベクトルソフトぽく、制御点を動かして、曲線を変形させられるようにしてみます。 サンプル 先に動作サンプルからどうぞ。Firefox, Chromeで動作確認済み。 （このサイト、HTML5じゃないんですが、まぁ気にしないでください 笑） けっこうグリグリ動かせていい感じですね！ 解説 そんなにむずかしいことはありませんが、簡単にするためにベジェ曲線はBezierCurveクラスにまとめています。 コンストラクタで初期化したあとは、メインループからhitTestメソッドとdrawメソッドを呼び出しています。 ソースコード JavaScript ソースコードの全文です。こちらからダウンロードすることもできます。 function Bezie
A Collection Of Amazing HTML5 Demos And Experiments
Gone are the days of boring websites that only used plain text pages and boring simple colors. Today, the possibilities are endless as to what can be produced. With the current versions of HTML5, JavaScript and CSS3, you can create absolutely mind-blowing dynamic graphics and animations to spice up your ordinary website. These tools will allow your users to you use geolocation information, 360 deg
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光
HTML5の3D表現を身につけよう！簡単なJSではじめるWebGL版Away3D入門 - ICS MEDIA
Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ（HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 そこで、初級者にもやさしいAway3D TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。 この記事について AwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three
風の動きを可視化する「Tokyo Wind Map」がバージョンアップ、世界版「Earth」が公開 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
数週間前、私はここ東京で、奇才を放つ Cameron Beccario とビールグラスを交わすことができた。[1] 彼は最近、よくできた D3 Java Script ライブラリを使って、公開風速データを可視化した地図「Tokyo Wind Map」を開発した。THE BRIDGE をよく見ている読者なら、我々が以前公開した Japan Internet Map で、この JavaScript を使っているのに気づいているかもしれない。とてもよくできたツールだ。 その夜以降、Cameron はプロジェクトをより大きな展開へと開発を進め、最新プロジェクト「Earth」を公開した。Tokyo Wind Map を初めて見たとき、私は開いた口がふさがらなかったのだが、Earth は新しいレベルに達しており、世界中の現在の [2] 天気の状態（晴れか曇りか）が、よりわかりやすく表現されている。Ca
このJavaScriptフレームワークでHTML5は救われるかもしれない | readwrite.jp
HTML5はウェブ・ページをアプリのように動かし、そしてFlashに取って代わるはずだった。しかしパフォーマンスの問題で、アプリ開発者のHTML5導入は遅れてしまっている。 Famo.us社はこのギャップを埋めるためにスタートした小さな会社だ。同社は2Dと3Dの両方のエフェクトを高速表示するため、HTML5の遅延要素を本質的に回避する独自のフレームワークを開発した。このFamo.usによって、開発者はHTML5のパフォーマンスの問題に苦しむことなく、より短期間でクロスプラットフォームのアプリを開発することが可能となったのだ。 Famo.usの秘密はJavaScriptを利用していることだ。JavaScriptは極めて高速に動作し、既にあらゆるブラウザで広く使われている。Flashとは異なり、ブラウザ・プラグインをユーザーがダウンロードしたり、ブラウザメーカーがそれをサポートする必要もない。
ブラウザ音響プログラミング言語 CoffeeCollider v0.1.0 リリース - 音の鳴るブログ
「CoffeeScript を SuperCollider みたいに処理をしよう ♪♪」をコンセプトに開発していたブラウザ音響プログラミング言語 CoffeeCollider をリリースしました。音響プログラミング言語ということで、とにかく試して聞いてもらうのが手っ取り早い。以下のリンク先で "BOOT" と "RUN" すれば深夜っぽい音が鳴ります。 CoffeeCollider で、なんなの？ SuperColliderってなんだ？という人には 言語 & ライブラリ & 実行環境 という意味で processing.js の音楽版と言った方が分かり良いかもしれない。とにかく音がでる。音しかでない。とにかく音を出してほしいという気持ちで作った。最初はいい加減な気持ちでやっていたのだけど途中から結構がんばりだして、最終的にはカレーを食べにいく趣味ができました。 CoffeeScript拡張
HTML5 conference 2013
5. 5 モバイルの現状を、真摯に受け止める • 世の中、ネイティブアプリ全盛期 – パズドラからgmailまで、あらゆるアプリがネイティブアプ リで登場 – HTML5で作成され、世界的に普及しているWebアプリは一つ もない • ネイティブアプリの開発が大変楽になっている – メジャーなOSが、iOSとAndroidの2種類のみ – クロスプラットフォームなフレームワークもたくさん出来 ている • 大変遺憾ながら、 ネイティブアプリ ＞＞＞ Webアプリ Broadtail Confidential Confidential 5 6. 6 Webアプリの利点と欠点 利点 欠点 • インストールが不要 • 実行速度が遅い • あらゆるブラウザ搭載端末か ら、URLのみで起動できる • 互換性がない • リアルタイムアップデートが 可能 • 3D、音楽などのハードウェア に密着した処理が辛
[HTML5] LocalStorageで保存するデータを暗号化する - YoheiM .NET
HTML5のLocalStorageとは、ブラウザ内に永続的にデータを保存する事が出来る技術です。 この技術はCookie以外の方法でブラウザ内のデータ永続化出来る点で、大変便利なものですが、 保存するデータは暗号化されません。 そのため、ブラウザのデベロッパコンソールなどで簡単に保存したデータを参照する事が可能です。 今回は、LocalStorageで保存するデータをクライアントで暗号化してみる方法をやってみました。 データ保存時に暗号化する 暗号化方式は色々ありますが、今回は比較的簡単なDESの方式を用いました。 まずは、暗号化する為の秘密鍵をユーザーに入力してもらいます。 そしてその秘密鍵を元に、LocalStorageでデータ保存を行う際に、暗号化を行います。 （データを暗号化した例） http://www.yoheim.net/labo/html5/localstorage/st
![[HTML5] LocalStorageで保存するデータを暗号化する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/dbec39511484605c4f0be7445cdfbc5af43b3c85/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2Fme.jpg)
高品質でリアルな楽器音と「eVocaloid」による歌声合成に対応した新音源LSI。 ヤマハ “歌って、奏でる、次世代音源” 『NSX-1』 - ニュースリリース - ヤマハ株式会社
当社は、電子楽器製造のノウハウで培った技術を活用し、多彩な音源LSIを販売してきました。これらの音源LSIは、電子楽器や携帯端末、アミューズメント機器、家電、自動車など、さまざまな分野で使用されています。 今回、量産出荷を開始する『NSX-1』は、当社の電子楽器技術、歌声合成技術、半導体技術、インターネット技術を結集した、まったく新しい“歌って、奏でる、次世代音源”です。通常の「General MIDI」による音色にくわえて、当社のフラグシップモデルであるコンサートグランドピアノ「CFX」をもとにした高品位なアコースティックピアノ音色から、インターネットを中心に高い人気を誇るバーチャルシンガーによる歌声まで、幅広い音を奏でることができます。 また、プログラミング言語「JavaScript」から『NSX-1』を操作するためのライブラリと、そのライブラリを使ったサンプルのウェブアプリケーシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PixiJS v4
forked: スケッチ風3Dレンダリング - jsdo.it - Share JavaScript, HTML5 and CSS
IBM Developer
