Web Audio APIとVue.jsで波形を見るためのオシロスコープをSVGとCanvasでつくる
前回、いろんな音がだせるオシレーターをつくった。 音が出せるようになったら、やっぱりどんな波形か見たくなるのが世の常。 ということで、今回はWeb Audio APIとSVG/Canvasをつかってオシロスコープをつくる。 パフォーマンス検証のためSVGとCanvasの双方をつかったが、サンプルが小さかったこともあり違いは見られなかった。（詳細は後述する） 音声波形データを取得する OscillatorNodeをAnalyserNodeに繋ぐことで、音声波形や周波数のデータを取得できる。 // Oscillator → Analyser → Speakerの順に繋ぐ const ctx = new AudioContext(); const analyser = ctx.createAnalyser(); analyser.connect(ctx.destination); const o
Rough.js
Create graphics with a hand-drawn, sketchy, appearance Rough.js is a small (<9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG. Install Install from npm: npm install --save roughjs And use it in
わぷーの塗り絵をcanvasとSVGで作ってみる | q-Az
わぷー Advent Calendar 9日目の記事です。JavaScript で canvas を使ってわぷーの塗り絵を作ってみます。 この記事とは全く関係ありませんが、昨年 脱jQuery Tips Advent Calendar というカレンダーを1人で書き切りました。 参考：脱jQuery Tips Advent Calendar わぷーの SVGわぷーは公式で SVG が公開されいています。PNG 画像などから塗り絵を作るのは少し大変ですが、SVG でも配布してくれてるなら塗り絵簡単に作れるんじゃ、と思ったがはじまり。 参考：わぷーのSVG 以下のわぷーは SVG のわぷーです。 Created with Sketch. <svg width="60px" height="66px" viewBox="0 0 60 66" version="1.1" xmlns="http://
25 Snippets That Demonstrate the Power of Canvas & SVG
Discover 25 CSS and JavaScript snippets that demonstrate some of the amazing effects you can create using SVGs and canvas elements. Open source code has ushered in a new era of frontend web development. Beginners and experts alike can save time and stress by working with pre-built code snippets. The following gallery consists of 25 different snippets for creating animated effects with pure CSS. Al
SVGヤバイ 2013冬 - fragmentary
Chrome 31がStableになって久しい。何が変わったのか思い出せないんだけど、ひとつだけ覚えてるのがこちら。 (@156422) - b87d44f — Allow SVG images to not taint the canvas with drawImage/drawPattern WebKitのパッチをマージしたものらしい。ちょっとずつ離れているらしいけど、まだお互い共有できるパッチもあるんだね。 さて、このパッチによって、CanvasでSVG画像をdrawImage()などで描画したとき、条件によってはそのCanvasがtaintされなくなった。 Tainted Canvasとは CanvasにはdrawImage()など、画像をCanvasに描画するメソッドがある。ここで、スクリプトとsame-originではないとこにある画像を描画してしまうと、セキュリティ上の都合か
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
DOM オブジェクトを Canvas に描画する - HTML: HyperText Markup Language | MDN
セキュリティ上の理由から簡単ではありませんが、HTML など DOM の内容を canvas に描画することができます。この記事は Robert O'Callahan によるブログ記事をもとに、セキュアに、安全に、そして仕様に準拠したかたちでそれを実現する方法を紹介します。 概要 HTML をそのまま canvas に描画することはできません。その代わりに、描画したい内容を含む SVG 画像を利用します。描画したい HTML を含む <foreignObject> を作り、その SVG 画像を canvas に描画するのです。 描画へのステップ 唯一厄介なのが、SVG を作ることです。SVG のための XML を含んだ文字列を作り、次のものを含んだ Blob を生成することです。 "image/svg+xml" という Blob の MIME タイプ <svg> 要素 svg 要素内の <
Animate your HTML5
Accès rapide: ➛ CSS3 ➛ SVG ➛ Canvas ➛ WebGL ➛ CSS shaders précédentsuivant action action = sur la plupart des slides, il se passe quelque chose quand on clique (surtout les slides 4, 9, 19, 31 et 38 :-) Quick access: --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- previous next action action = on most slides, something happens when you click (especially sl
)
Internet Explorer ガイド - Canvas および SVG
デザイナーや開発者は、Canvas を使用して、JavaScript でページにビットマップ グラフィックを描くことができます。Canvas は、ページ内の要素を定義する <canvas> 要素と、その要素内で描画を行う一連の API で構成されます。 SVG は、イメージや図形を描くための XML ベースの形式です。SVG イメージはベクター ベースなので拡大率を変更しても影響を受けません。拡大した場合でもイメージの品質がほぼ維持されます。
SVGヤバイ - 最速チュパカブラ研究会
canvas を苛めていたら気づいたことがあったので書きます。（この記事は2011年5月現在の情報です。あなたがこの記事を読んでいる時点で、より新しくて良い方法が無いか確認して下さい） 基本的な話 canvas には、図形を描画する機能だけでなく、描かれている内容を読み取る機能があります。getImageData を使うと、canvas の内容をピクセル単位で読み取って画像処理をかけたりできます。また、toDataURL を使うと canvas の内容を Data URI として出力でき、サーバに送信したりできます。 しかし、この機能にはリスクがあります。例えば、悪意のあるページを開いただけで、社内SNSにしか公開していないあなたの顔写真を canvas 経由で抜き取られるかもしれません。そういう事が起きないように、他のサイトから読み込んだ画像が canvas に描画されている場合（以下、
Canvas vs SVG performance on iPad | Floorplanner Tech Blog
I’m doing a bit of HTML5 performance testing, especially on the iPhone and iPad. When doing interactive stuff, it seems that most of the resources are used for updating the stage (clearing and drawing), and not so much by doing calculations in JavaScript. I created two very simple tests to see if the performance is different using Canvas or SVG. It’s a fabulous blue cube bouncing up and down as f
Dev.Opera — SVG or Canvas? СHoosing Between the Two
Article update, 16th June 2010: Notes added to say that Microsoft have announced support for SVG and Canvas in IE9. Contents:IntroductionScalable Vector GraphicsHTML 5 CanvasComparison of SVG and CanvasWhich one to pick?SummaryIntroductionNew Web technologies are gaining support across browsers, with bridging solutions becoming available for those that don't, eg Raphaёl for SVG, and ExCanvas for C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas
XNG(SVG+CSS Animations)を使った背景アニメーション
Fabric.js Javascript Canvas Library
Two.js: Particle Sandbox
Graphical Web Advent Calendar 2013 - Adventar
More preview enhancements for Windows Azure AD Premium - Active Directory Blog - Site Home - TechNet Blogs
)
HTML5 Graphics (Windows)
『Programming Windows 8 Apps』 の第1章を翻訳しました - Windows 開発統括部 Blog - Site Home - MSDN Blogs