リサイズイベントのパフォーマンスチューニング
リサイズイベントで、所定の処理を再実行したり、レイアウト調整（Canvasのサイズ変更など）を行う。 私自身も頻繁に実装しますし、従来から存在するリサイズイベントですが、意図せず短期間に繰り返し（過剰に）実行されるケースが多々あります。 処理内容が低負荷であれば、繰り返し実行されても差し支えない（気づかない）ですが、 高負荷の場合（特にPCと比較して非力なモバイル端末）は、パフォーマンス低下の原因になり兼ねません。 この問題を解決するアプローチとして、従来のコードに少し手を加えるだけで不要な処理をキャンセルし、パフォーマンスを向上させるTipsをご紹介します。 ちなみにリサイズイベントは、スマホ／タブレット端末の向き（縦向き＝ポートレート or 横向き＝ランドスケープ）を変更した場合でも発生しています。 通常のリサイズイベント 通常、リサイズイベント実装は下記のようなコードになると思います
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
HTML5のCanvasを使いやすくするライブラリまとめ
Posted: 2013.12.20 / Category: HTML&CSS, javascript / Tag: HTML5 HTML5のCanvasをそのまま使おうとすると結構大変ですね。そこでCanvasのライブラリとか使うと効率がいいらしいのでまとめてみました。 CREATEJS CREATEJSはTweenアニメーションとかオーディオ再生とか色々まとめたパッケージでcanvas部分はEASELJSになります。 Flashからの書き出しもできたり、日本語の書籍もあったりと結構有名ですね。 sample code var circle = new createjs.Shape(); circle.graphics.beginFill("red").drawCircle(0, 0, 50); circle.x = 100; circle.y = 100; stage.addChild
（ちょっとメモ）Canvasで便利な javaScriptライブラリ
（ちょっとメモ）Canvasで便利な javaScriptライブラリ 最終更新日：2019年02月06日 （初回投稿日：2015年01月23日） Canvasで図形やの描画のソース書いていて「わ〜面倒くさい」と思うことが度々あります。 私はまだ超canvas初心者なので、面倒くさがってる場合じゃないのですが、 Canvasで使える javaScriptライブラリがいろいろあるらしいので、後学のためにメモっておきます。効率良くなるんだとか。 基礎がわかってそこそこCanvas使えるようになったらライブラリも使おっと。 （なんだ〜ヤッパリあるんじゃない、あると思ったわ〜ライブラリ） ヒト様の「まとめ記事」を利用させていただいて、大変恐縮なんですが、 これら↓の記事がいろいろ網羅されているのでメモ。 k.ishiwataさんの WEB PIXEL「HTML5のCanvasを使いやすくするライブラ
HTML5のCanvasを簡単に高機能化してくれるJSライブラリ「Fabric.js」
こんにちは、渡辺です。 HTML5のCanvasを簡単に高機能化してくれるJSライブラリ「Fabric.js」を紹介します。 Canvas上に描いた絵をマウス操作で動かしたり、拡大縮小する機能が標準で付いていてスゴい便利なライブラリです！ まず、このライブラリの主な特徴についてです。 ■特徴 ・インタラクティブ性 Canvas上に描いたものをマウスやタッチで自由に操作できます（ドラッグ、拡大縮小、回転）。 ・Canvasに描いた内容をオブジェクトとして扱える Canvasに描いたものをgetメソッドやsetメソッド経由で設定変更できます。 ・Canvasのシリアライゼーション・デシリアライゼーションのサポート Canvas上の内容をJSONまたはSVGに変換でき、再度インタラクティブな描画内容を復元することができます。 ■準備 1. ライブラリのダウンロード https://github.
テオ・ヤンセン機構をHTML5 Canvasでアニメーションに - roombaの日記
はじめに オランダのアーティストであるTheo Jansen(テオ・ヤンセン)氏は、風力によって歩行する巨大な脚「ストランドビースト」をつくったことで有名です。「ストランドビースト」には特殊なリンク機構(Jansen's Linkage)が用いられており、これによって風力による回転運動を生物のように生き生きとした脚の動きに変換しています。 Theo Jansen Japan Jansen's linkage - Wikipedia, the free encyclopedia 以下のような組み立てキットも発売されています。私も持っていますが楽しいです。 大人の科学マガジン Vol.30 (テオ・ヤンセンのミニビースト) (Gakken Mook) 作者: 大人の科学マガジン編集部出版社/メーカー: 学習研究社発売日: 2011/01/14メディア: ムック購入: 13人 クリック: 267
フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶
「HTML5で冷気を表現したサイトがすごいな」を分解してみた！ / SQUEEZE - Web Design Studio -
「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過pngで作成されたリアルな冷気画像を、少しずつ動かして描画します。(1)は右から左へ、(2)は時計まわり、(3)は上から下へ。 スムーズなループアニメーション (1)の右から左へのアニメーションの場合、同じ位置に同じサイズで<canvas>を2つ配置して、それぞれに同じ透過pngを描画します。片方は透過pngの幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
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コード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました
ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記
はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing
『canvas』要素の勉強をする時の参考サイトまとめました | HTML5でサイトをつくろう
HTML5の『canvas』要素 今回の標題でもあるcanvas要素は、HTML5の新要素の中で最も注目されている要素の1つなので、私もこれから学習していくのがとても楽しみです。 まずcanvas要素について知るために参考サイトを見つけることから始めました。調べるとすぐにサンプルなどが数多くヒットし、その中には目を奪われる表現や複雑な処理を行っているモノがいくつもありました。また、サンプルは非常に多いのですがちゃんとしたサイトでの事例はまだまだ少ないのが現状だということも知ることができました。まずは焦らず基礎から勉強していこうと思います。 『canvas』要素のサンプルまとめ 今回調べた『canvas』要素を使ったコンテンツをいくつかピックアップしましたのでご紹介します。 HTML5 Canvas and Audio Experiment 音楽に合わせて複数のオブジェクトが円になったり、マ
<canvas>タグで図形を描く－HTML5リファレンス
■<canvas>タグで図形を描く 今までウェブページ上で図形を描くには、 PNG・ JPEG・ GIFなどの画像に置き換えるか、 Flash などのプラグインデータを埋め込むのが一般的でした。 HTML5では、2Dのグラフィックスを描く、<canvas>要素が新たに追加されています。 <canvas>を使用することで、標準のHTMLとJavaScriptだけで、 グラフやゲームグラフィックスなどの図形をすばやく表示できるようになります。 HTMLの部分は大変シンプルです。
JavaScriptを使って描画するCanvasとは？
Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。 手前みそで恐縮ですが、図1は筆者がCanvasを使って作った棒グラフを描くJavaScriptライブラリのキャプチャ画像です。Canvasを使うことで、簡単な図だけではなく、かなり凝ったデザインも扱うことができることがおわかりいただけると思います。 しかし、Canvasは決してFlashの代替技術ではありません。まずは、Canvasの特徴を簡単にまとめてみましょう。Canvasの特徴としては、「JavaScriptを使って描画する」「文字は描けない」「アニメーション機能がない」の3つがあり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5のCanvasでレスポンシブなリンク – 矩形(四角)編 | スターフィールド株式会社
Fabric.js Javascript Canvas Library