Exploring canvas drawing techniques — Perfection Kills
Exploring canvas drawing techniques Table Of Contents (toggle) Basics Simple pencil Smooth connections Edge smoothing with shadows Storing points Storing points with shadow Edge smoothing with radial gradient Bezier curves Brush, Fur, Pen Fur (rotating strokes) Pen (variable segment width) Pen #2 (multiple strokes) Thick brush Sliced strokes Sliced strokes with opacity Multiple lines Multiple line
#スーパーイカメーカー を支える技術 - console.lealog();
どうも、中のイカです。 昨日の15時頃に晴れてリリースしたコレですが、正直想定してなかったレベルで反響があって驚いてます。 leader22.github.io さてさて、というわけで恒例の裏側紹介記事です。 近況 今のところの瞬間最大風速です。 とりあえずこんなん pic.twitter.com/65cIbl2N1e— りぃ (@leader22) 2016年1月21日 初めて見たわこんな数字ｗ ホッテントリ入りもしたしredditでもスレ立ったり。 トレンド入りしてるΣ(ﾟДﾟ；≡；ﾟдﾟ) pic.twitter.com/yDBVSf2ciE— そめ・そるめ (@jenga_ink) 2016年1月21日 まさかのポストすしざんまい！すごいなーイカ・・。 ほんと、サーバー落ちないかどうかだけが心配でした。 そもそもどの程度で落ちるかの想定もできないくらいの素人ですけど！ フロントエン
canvid.js
canvid is a tiny dependency free library for playback of relatively short videos on canvas elements. Why not just use HTML5 video? Because you can't embed and autoplay HTML5 videos on iOS! Yeah, that sucks. Why is this better than using an animated GIF? Videos look kind of gross when converted to animated GIFs because of the colors sampling. Also the file size of video GIFs can get pretty huge. GI
60fps on the mobile web — Flipboard Engineering
Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowing us to rethink content layout principles from the web for a more elegant user experience on a variety of touchscreen form factors. Now we’re coming full circle and bringing Flipboard to the web. Much of what we do at Flipboard has value independent of what device it’s consumed on: curating the bes
Inspiral Web
×CloseInspiral Web isn't mobile friendly... but you're in luck! Download the beautiful, ad-free Inspiral app for a first-class mobile experience!
High Performance Map Interactions using HTML5 Canvas - ChairNerd
Jobs at SeatGeek We are growing fast, and have lots of open positions! Explore Career Opportunities at SeatGeek Last week, you may have noticed that we released a facelift for our interactive maps. Our Deal Score markers have finally been brought up to 2014 design standards to match the Omnibox. However, what may not be as apparent is that our maps are now between 10 and 100 times faster, dependin
Off-Canvas Menu Effects | Codrops
Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. Today we’d like to share a couple of styles and effects for off-canvas menus. The off-canvas sidebar is widely used and we have already created some effect inspiration before. Like with everything, style evolves and today we want to show a new set of modern effects for your inspiration. Different
古めかしいCGを描くためのライブラリ gretro です - 音の鳴るブログ
gretro - JavaScript graphic library for retro CG (2014.08.14) お試しページを作りました 最近、昭和っぽい気持ちのCGを描きたい感じで20年くらい前の本を参考にしながら 円 とか 線 とか描いて遊んでいたのだけど、古い本を参考したら昭和っぽい絵が描けるというわけではなくて、Canvas に描くとどうしてもモダンな感じになってしまうという問題があった。 昔は4096色中の16色しか使えないとか座標は整数のみとか色々制約があって、それでも絵を描くためにタイルパターン（2色を交互に並べたりして中間の色を出す）とか駆使していたのだけど、今の Canvas だと16777216色、透明あり、小数の座標、アンチエイリアスも利くとか表現力が格段に高くてちょっと描いただけですぐモダンな感じになってしまう。大は小を兼ねるとか言ってもちろん Canv
Isomer – an isometric graphics library for HTML5 canvas
About Isomer allows you to draw isometric graphics with ease. Let's draw a simple cube. var Shape = Isomer.Shape; var Point = Isomer.Point; iso.add(Shape.Prism(new Point(0, 0, 0))); The Grid Here is the same cube overlayed with a 3D grid. This is how objects look under an isometric projection. /** * This is the 3D isometric grid that * we will be drawing on. * * The blue grid is the xy-plane. * Th
HTML要素の上にWebGLの描画を合成したらどうなるの - 最速チュパカブラ研究会
みたいなことを先週、ぴろたんと話していてですね。実際どうなるのか試してみました。こうなります。 赤い点線の枠が WebGL を有効にした canvas で、中の青い三角形は WebGL で描画されています。後ろの写真と「GL Overlay Test」という文字は通常の HTML です。 一見ちゃんと描画されているように見えますが、左側の半透明の三角形が、加算合成したような描画結果になっており、少し変です。本来であればもう少し暗い色で描画されている筈です。これは Chrome/Firefox あるいは Mac/Windows を問わず同じなので、今のところWebGL の描画結果を半透明で合成すると確実におかしくなるので、やめたほうがいいと言えます。が、逆に言えば、完全に不透明か完全に透明な部分は正しく合成されるので、限定的には使えるとも言えます。（描画結果にアンチエイリアスがかかっている場
video + canvas = magic | HTML5 Doctor
You’ve already learned about the <video> and <canvas> elements, but did you know that they were designed to be used together? In fact, the two elements are absolutely wondrous when you combine them! I’m going to show off a few super-simple demos using these two elements, which I hope will prompt cool future projects from you fellow web authors. (All of these demos work in every modern browser exce
「Ai→Canvas」イラストをHTML5形式に変換する画期的プラグイン 【増田@maskin真樹 | TechWave（テックウェーブ）
[読了時間:1分] 米Microsoftが運営するMixOnlineが10月12日、アドビ・イラストレーターのファイルをHTML5のCANVAS形式にエクスポートできるプラグイン「Ai→Canvas」を公開した。CANVAS形式で表現されたイラストは拡大縮小はもちろんアニメーションを施すことなどが可能になる。 プラグインインストール後、イラストレーターの「書き出し」コマンドを実行するとCANVAS形式を選択できるようになる。書き出されるのはHTMLファイルで、ベジェ曲線はそのままビットマップ画像はファイルとして保存される。対応ブラウザで表示することができる。（以下参照） 上のスナップショットでCANVAS変換したベジェのみで作成されたイラストを以下で公開している。 http://blog.metamix.com/sample/NAOC_LOGO_Illustration.html ソースを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Super Smooth Drawing Lines with quadraticCurveTo | CSSDeck
Demo: Easily build real-time collaborative applications
In this tutorial, we will walk through building a simple drawing application in Ionic using an HTML5 canvas.
GitHub - Flipboard/react-canvas: High performance <canvas> rendering for React components
GitHub - snorpey/glitch-canvas: glitch your canvas element
Chart.js
ROXIK | Monalisa