yuisekiのブックマーク - はてなブックマーク

HTML5のCanvasを使いやすくするライブラリまとめ
HTML5のCanvasを使いやすくするライブラリまとめ HTML5のCanvasをそのまま使おうとすると結構大変ですね。そこでCanvasのライブラリとか使うと効率がいいらしいのでまとめてみました。投稿日2013年12月20日更新日2014年02月08日 CREATEJS CREATEJSはTweenアニメーションとかオーディオ再生とか色々まとめたパッケージでcanvas部分はEASELJSになります。 Flashからの書き出しもできたり、日本語の書籍もあったりと結構有名ですね。 sample code var circle = new createjs.Shape(); circle.graphics.beginFill("red").drawCircle(0, 0, 50); circle.x = 100; circle.y = 100; stage.addChild(circl
yuiseki 2021/03/27
リンク
SVGを簡単に扱えるJSライブラリRaphael.js使ってみた
SVGを簡単に扱えるJSライブラリRaphael.js使ってみた jpgやpngはビットマップなため拡大すると画像が荒れてしまいますが、SVGはベクターデータなため拡大しても荒れることはなく単純な図形のような画像なら容量も抑えられるといった特徴があり注目されています。この記事ではJavaScriptからSVGを描画できるRaphael.jsというライブラリをご紹介します。投稿日2012年07月06日更新日2012年07月06日ライブラリのダウンロード下記公式サイトからダウンロードしてください。 Raphael_JavaScript Library 解凍したフォルダの中にある「raphael-min.js」を読み込みます。簡単な図形を描いてみる最初に簡単な丸を描いてみます。 SVGを描画するための「div」を用意します。 html <div id="svg"></div> cs
yuiseki 2012/07/08
tech

javascript
リンク
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。投稿日2012年03月08日更新日2019年12月19日ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
yuiseki 2012/03/08
リンク
1