君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
画像をピュアCSSに変換できるWEBツール「img2css」:phpspot開発日誌
img2css 画像をピュアCSSに変換できるWEBツール「img2css」 画像をブラウザ上にドラッグ＆ドロップでサクッとCSSコードに変換できます。 転送サイズとしてはむしろ大きくなるような気がしないでもないのですが、なかなか面白い仕組みです 関連エントリ 次世代のCSSホバーエフェクト全部のせ「iHover」 CSSアニメーションの終了をJSで検知してコールバックを実行できるJS ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 ピュアCSSでシャキシャキ動くローディングアニメーション集「Loaders.css」 テキストをCSSやSVG等でアニメーションさせるやばいサンプル集
画像・動画にリアルタイムでフィルタをかけられるjQueryプラグイン「toCanvas」:phpspot開発日誌
jQuery toCanvas Plugin 画像・動画にリアルタイムでフィルタをかけられるjQueryプラグイン「toCanvas」 グレー、セピア、ノイズ、ぼかしといった豊富なフィルタを画像・動画にかけられるプラグインです。 オーサリングツールでもなく、サーバサイドでもなく、ブラウザ上で動く、というのはやっぱり便利そうです。 関連エントリ トランポリン風に画像を切り替えるエフェクト実装デモ 画像に雨の日のエフェクトをつけられる「rainyday.js」 JavaScriptで画像に多数のエフェクトをかけられるライブラリ「glfx.js」 液体っぽいクリエイティなエフェクトでUIを楽しくするサンプル集 画像ホバー時のクールなエフェクト実装チュートリアル
Resizing and Cropping Images with Canvas | Codrops
Learn how to resize and crop images using JavaScript and the HTML5 Canvas element using controls, commonly seen in photo editing applications. In this tutorial we’re going to learn how to resize and crop an image using the HTML5 <canvas> element, and while we’re at it, let’s create some fancy controls for resizing, commonly seen in photo editing applications. In a real world example a website or a
JSでCanvasに描いた文字等をOCRできる「Ocrad.js」:phpspot開発日誌
Ocrad.js - Optical Character Recognition in Javascript JSでCanvasに描いた文字等をOCRできる「Ocrad.js」。 次のようにphpと文字を描いてみると認識される他、画像から文字を取得する事も可能。 ブラウザ上でしかもプラグインなしでも実現できるのは凄いですね 使い方も超簡単。 関連エントリ リンク先を先読みしてページの速度をあげるJSライブラリ「InstantClick」 モダンなプログレスバーを表示できるJSライブラリ「nanobar.js」 単体1KB以下で動作する遅延ローダーライブラリ「Echo.js」
Canvas小さな地図を描画できるjQueryプラグイン「smallworld.js」:phpspot開発日誌
smallworld.js Canvas小さな地図を描画できるjQueryプラグイン「smallworld.js」 小さくてズームも縮小もできず地名もでないけど、シンプルな世界地図とその上にマーカーを付けるだけの機能を使いたい場合に使えるプラグインです 地図の中心とズーム指定もできるみたいです。Canvasベースなので画像も荒くならないのが特徴 特定位置のマーキングも可能 関連エントリ 2Dの地図をリアルな3Dにして3Dマップを作れるPhotoshopアクション ベクターでレスポンシブな地図を描画できる「jQuery-Mapael」 地図アプリで使えそうなアイコンフォント「Map Icons」
GSkinnerの作ったJavaScriptライブラリが素敵すぎる件 | fladdict
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
まるで自分の意思があるかのよう！canvasサイトまとめ12選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。たまです。 最近canvasを使用したサイトをちらほら見かけますね。サイトのコンセプトに合えば是非とも取り入れたい表現です。 今回は有機的な動きをcanvas+javascriptで展開しているサイトをまとめてみました。 インスピレーションが湧いてくるな〜。では行ってみよう！ My Life in 20 Years https://www.mylifein20years.com/ ※現在はサービスを終了しています。 facebookと同期してみてください。他のユーザーとの関係を繋ぐラインや読み込み時のローディング等、所々canvasが使用されています LAMDASH DNA | メンズシェーバー ラムダッシュ | Panasonic https://panasonic.jp/shaver/lamdash/dna/index.html DNAがcanvasによって表現され、3Dの
Canvasできれいな色相環を描画する : document
8月14 Canvasできれいな色相環を描画する はじめに JavaScript で Canvas を使っていると、HSV の Color Picker とか作りたくなって色相環を描画したくなることがよくあるとおもいます。 ここでは、自分の行っている色相環の描画方法を説明します。 準備 色相を扱うのために HSV 色空間を使います。HSV から RGB への変換は以下の function を用います。 function hsvToRGB(hue, saturation, value) { var hi; var f; var p; var q; var t; while (hue < 0) { hue += 360; } hue = hue % 360; saturation = saturation < 0 ? 0 : saturation > 1 ? 1 : saturation; v
「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の幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ
canvas,svg,webglを使った２次元画像/アニメーションを描画できる「Two.js」:phpspot開発日誌
canvas,svg,webglを使った２次元画像/アニメーションを描画できる「Two.js」 2013年05月28日- Two.js canvas,svg,webglを使った２次元画像/アニメーションを描画できる「Two.js」。 Twoというクラスのコンストラクタにcanvasやsvgを指定することで描画エンジンを選択し、２次元のグラフィックを描画できます。 直感的なAPIで使いやすく、デモのアニメーションがなかなかおもしろかったのでご紹介 ブラウザ上で動くアニメーション作成の際の選択肢として覚えておいてもよいかも 関連エントリ HTML5とCanvasでアプリを作れるフレームワーク「iio Engine」 jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」 JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」 WebGLではなく
HTML5、CSS3だけじゃない！ブラウザで実装できるスゴい技術14選 【WebGL】 | らふらく^^ ~ブログで飯を食う~
2 CSSだけでかわいいボタン最近のトレンドともいえる画像を使わずにCSSだけでリッチな素材をつくった作品。 スマホサイトでは、読み込みを速くするためにこうした技術が必要になってくるので、ぜひ覚えたい所です。 ハートの部分は難しそうだなー。 かわいいふきだし 3 CSSだけでゲーム！CSSだけでシューティングゲームがつくれてしまうという驚きを与えてくれる作品。 :hover, :cehecked をうまく使っています。 CSS3 OF THE DEAD 4 CSSでワニワニパニックCSSだけでワニワニパニックがつくれてしまうんですね！驚きです。 ゲームセンターにいる感覚を味わせてくれます。 CSS PANIC 5 実写と見間違う桜桜が舞う美しすぎるアニメーションです。 動画と見分けがつかないくらいにキレイ！ WebGLを使っているようです。 Amazing Sakura 6 「デザインあ」
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」:phpspot開発日誌
AwesomeChartJS HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 データは配列で定義してdrawするだけです。描画コードは次のように美しい。 var mychart = new AwesomeChart('canvas1'); mychart.title = "Product Sales - 2010"; mychart.data = [1532, 3251, 3460, 1180, 6543]; mychart.labels = ["Desktops", "Laptops", "Netbooks", "Tablets", "Smartphones"]; mychart.draw(); IEではフォールバックされていないため動作しませんがiPhoneなどのcanvasタグ対応ブラウザをターゲットとするなら便利に使えそう 関連エントリ Ja
[HTML5] CanvasでRetina対応を行う - YoheiM .NET
こんにちは、Canvasでバリバリ仕事中の@yoheiMuneです。 最近のWebアプリでCanvasを使っているアプリが多いですが、Retina対応できておらず、にじんだ感じになっているアプリが多々あり。。 なので、CanvasでRetina対応できるのかを調べました。今回はその結果を記載したブログとなります。 Canvasで普通に描画するとにじむ Canvasの描画内容をRetinaでない多くのPCブラウザで見る分には問題ないのですが、 iPhoneなどのRetina対応したブラウザで見るとにじんで見えてしまいます。 画像などの表示ではRetina対応を行う事が多いですが、 CanvasでもRetina対応する事でにじまずに描画内容を表現できるようです。 CanvasでRetina対応をする方法は、画像のRetina対応の考え方と同じで、 描画した内容を1/2のサイズで表示することでキ
![[HTML5] CanvasでRetina対応を行う - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/7a7befe78801333ad9435805e5c94897b4e17911/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F161.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Modify Fonts With JavaScript and Plumin.js | NOUPE
IDEA * IDEA
IDEA * IDEA
Canvasベースの読込中アニメーションデモ「Sonic」:phpspot開発日誌
オープンソースのHTML5お絵かきウィジェット「Literally Canvas」:phpspot開発日誌