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

技術 - Canvasの記事一覧

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

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

もっと見る

List

  • 2017/05/13

curvejs - 曲線を使ったアニメーションライブラリ

Web上でアニメーションを描くのはとても面倒です。一度表示するだけであればこだわったリッチな描画も可能ですが、アニメーションとなると話が変わってきます。Canvasで描画している場合は、その内容を消す操作が必要です。文字が揺れるようなアニメーションを実現したかったらcurvejsを使ってみると良さそうです。## cur...

List

  • 2017/04/21

pocketplace - Canvasの内容を同期

HTML5のCanvasを使えばお絵かきボードのようなイラストを描ける環境を作ることができます。とは言え自分でイチから作るのは大変です。Canvasは通常のDOMと違い、描画や消したりする方法が全く異なります。そんなCanvasをシェアする方法を手軽に実装できるのがpocketplaceです。## pocketplac...

List

  • 2017/04/05

Konva - Canvas上で2Dを描くのに便利なライブラリ

HTML5の表現力を引き上げる技術にCanvasがあります。しかし使うこなすためには覚えるべきことがたくさんあります。DOMで作るようにCanvasは使えないのが難点です。しかしCanvas用のライブラリも多数存在します。今回はその一つ、Konvaを紹介します。2D向けのCanvas用ライブラリです。## Konvaの...

None

  • 2016/12/01

Simple-HTML5-Drawing-App - 線種や太さが変えられるWebペイントアプリを作成しよう

HTML5では多くのAPIが追加されていますが、見た目のインパクトがあるものと言えばCanvasではないでしょうか。インパクトだけならWebGLもありますが、使いこなすのは難しいかもしれません。今回はそんなCanvasを使ってペイントアプリを作るチュートリアル&ソースコードを紹介します。## Simple-HTML5-...

List

  • 2016/06/13

atrament.js - スムーズな線の描けるドローソフトウェア

今なお個人的に好きなソフトウェアがSkitchです。Evernoteに買収されてしまいましたが、一番シンプルで使いやすかったバージョン1系を未だに使っています。何よりいいのがマウスで線を描いたとしても滑らかな曲線に置き換えてくれる機能です。そんなSkitchを彷彿とさせるソフトウェアがatrament.jsです。Jav...

List

  • 2016/03/13

Drawingboard.js - 自分のサイトに埋め込めるドローライブラリ

Canvasの利用例として、ドローイングはよくあります。その多くはドロー機能メインのWebサイトで、コラボレーションしたり、画像として保存できるものになるでしょう。しかし皆がみんな、ドローイングサイトを作りたい訳ではありません。そこで使ってみたいのがDrawingboard.jsです。自分のサイトに組み込んで使えるドロ...

List

  • 2015/11/16

shaky box and lines CoffeeScript - shakyを使ってアスキーアートから手書き風ドローへ

きっちり正確なドローイングを描くライブラリを使うと、ついつい内容まで正確性を求めるようになってしまいます。プロトタイプやブレインストーミングレベルであればもっと粗雑に、ラフに書く方が都合が良かったりします。そんな訳で使ってみたいのがshaky box and lines CoffeeScriptです。アスキーアートレベ...

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でしか作れなかったよう...