View
947
Download
2
Category
Preview:
DESCRIPTION
Citation preview
Ribbon Spread
HTML5Canvas
❤Artwork
@ivoryworks2012/03/03 gunma.web #8
@ivoryworks
--- Side-Day ---C
Java
--- Side-Night ---PHP
JavaScriptPython
andHTML/CSS
今回は
HTML5<canvas>
<canvas>❤
JavaScript
何かと話題のcanvasだけど
何ができるの?
まるctx.beginPath();ctx.arc(x, y, rad, sAngle, eAngle, anticlockwise);ctx.stroke();
すごい!
しかくctx.beginPath();ctx.strokeRect(x, y, width, height);
断然すごい!
せんctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.lineTo(x3, y3);ctx.stroke();
<canvas>無限の可能性を秘めている
❤
Q.これなに?
Rolling shutter
1フレームの画素毎の蓄積インターバルが、ずれているために発生している。
http://www.vectoresgratis.com/fiat-500/
よしこれやろう
HTML5<video>
❤<canvas>
再生しながら<video>
ちょっとずつ<canvas>
出す
仕様書
Ribbon Spread
Ribbon Spread
Ribbon Spread
Ribbon Spread
素材はスーパースローがいい
回転は意外なビジュアルを生む
demo
●<canvas>いいね!●定点撮影がいいね!●スーパースローいいね!●回転いいね!●動いているものだけが歪む●プログラムより素材探すほうが時間掛かった●さあJavaScript書いて描こうぜ!
まとめ
http://www.flickr.com/photos/free-photos/3661193438/
Ribbon Spread❤♠♦♣
Recommended