ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - Canvasの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2015/11/09

3D Touch Canvas - Cavans上で3D Touchを使って線を描画

iPhone 6sから新しく追加された機能として3D Touchがあります。主にアプリ向けの機能ですが、対応機種が限られること、さらにUXとして分かりづらいこともあって、普及にはまだしばらくかかることでしょう。そんな3D Touchを活用するためのライブラリとして3D Touch Canvasを紹介します。3D Tou...

List

  • 2015/10/18

GifCaptureCanvas - Canvasを使ってアニメーションGIF生成

アニメーションGIFの可能性は無限大だと思う。Webサイトに使うのはもちろん、ソーシャルメディアに投稿したり、GitHubやSlackなどに貼り付けられたりもします。アニメーションの繰り返しだけなのですが、内容が面白いものが多いのが特にユニークです。そんなアニメーションGIFを作るには幾つかの方法がありますが、今回はC...

List

  • 2015/03/19

Konva - Canvasで2Dを描くためのJavaScriptフレームワーク

HTML5における表現力向上に期待がかかるのがCanvasやWebGLです。とはいえこれまでのHTML並に書きやすいという訳ではなく、描画や操作をするには異なる技術の習得が必要になります。そこで使ってみたいのがKonva、2DをCanvas上に描画するためのライブラリになります。## Konvaの使い方!サンプルです。...

List

  • 2015/03/05

React Canvas - 要注目!ReactでCanvasに描画

最近Reactに注目が集まっています。面白いのはViewのコードを抽象化しているのでReactのViewをDOM以外に展開することも考えられるということです。その一つが先日発表されたReact Nativeでしょう。そしてFlipboardはReact Canvasを開発しました。これはDOMの代わりにCanvas上に...

List

  • 2015/03/03

Scroller - DOM/Canvas対応のスクロール&ズームライブラリ

Googleマップをはじめて操作した時の驚きは今も覚えています。マウスでドラッグして無制限に動かせたり、マウススクロールでズームイン、ズームアウトさせることができました。この凄さに驚いた開発者がこぞって同じような操作ができるライブラリを開発しました。Scrollerはその一つの試みで、HTMLに加えてCanvasでもズ...

List

  • 2015/02/23

canvg.js – SVGをパースしてCanvas上に描画

HTML5になってから新しく出てきたグラフィックス要素にSVGとCanvasがあります。Canvasはバイナリとして生成され、SVGはベクターデータでありその使い分けはできるでしょう。しかし逆にSVGデータをCanvas内に描画したい時もあるはずです。そこで使ってみたいのがcanvg.jsです。SVGデータをパースし、...

List

  • 2015/01/25

Primrose – Canvasタグを使ったテキストエディタ

Primroseはどことなく変わった雰囲気のテキストエディタになります。Web上で動くのでテキストエリアを使っているかと言うとそうではありません。ハイライト処理にも対応しているのでスタイルシートを使っているかと言うと、そうではありません。なんとCanvasタグを使っており、その場で編集できるテキストエディタとなっていま...

List

  • 2014/12/06

Mirror Draw – Canvasを使って左右反転させてドロー

人はモノを書いている時、それを視認することで正しく書けるというのを聞いたことがあります。例えば鏡を使って左右反転するようにしつつ、それを見ながら文字や絵を描くのはとても難しいようです。そういった目的があるのかは分かりませんが面白いWebアプリケーションがMirror Drawです。Canvasでマウスを使って描いた絵を...

List

  • 2014/08/29

Gretro – レトロなグラフィックスを描き出すJavaScriptライブラリ

最近は綺麗なグラフィックスばかり見ますが、そんな時代だからこそ逆に懐古的にレガシーなグラフィックスが楽しい場面もあります。しかし十分に高機能化した現在においてレガシーな状態を作り出すのはそうそう簡単ではありません。再現のためにはレガシーな環境を十分に調べなければならないでしょう。そうやって完成したのがGretroです。...

List

  • 2014/08/12

shaky - 意外と難しい。正確に書かないドローライブラリ

コンピュータは正確な図形を描くのは得意です。逆に人は正確な線をフリーハンドでは引けませんが、それがかえって味があったりして柔らかな印象を与えます。コンピュータの描く線は冷たい印象を受けるでしょう。そこで使ってみたいのがshakyです。Canvasを使ってドローするのですが、その描く図形が手書き風でいい感じなのです。##...

List

  • 2014/07/02

crossfade.js – スクロールで画像をぼかすエフェクト

パララックスエフェクトによってスクロールに意味を持たせる動きが活発になっています。スクロールするとアニメーションしたり、色が変わったりするサイトもありますが、今回はまたちょっと違うアクションです。crossfade.jsを使うと画像がぼかされて目立たなくなっていきます。シングルページのWebアプリケーションで効果的に使...

35292?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f02%2fscreenshot-2012-02-06-14.14.07_thumb

  • 2012/02/13

この発想はなかった。GIFアニメーションをCanvasで解析して自由に再生「jsgif」

jsgifはGIFアニメーションを解析し、一時停止したりリバース再生したりできるJavaScriptライブラリです。GIFアニメーションは動画が当たり前になった現在、廃れるかと思ったのですが未だに好んで使われています。特にちょっとしたお笑い系動画をGIFアニメーションにしていると面白いです。そんなGIFアニメーションを...

25584?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f02%2fscreenshot2011-02-18-14.00.22_thumb

  • 2011/03/01

HTML5+Canvasタグによるアニメーションユーティリティ「gury」

guryはjQueryを使ったCanvasタグ用JavaScriptユーティリティ。HTML5向け。guryはjQuery/HTML5/JavaScriptによるオープンソース・ソフトウェア。HTML5の登場以来、期待が高まっているのがCanvasタグを使った図形描画だ。これまでは画像やFlashでしか作れなかったよう...