jQuery x HTML5canvasアニメーション
- Html5 canvas loading animation effect〔canvasタグ＋jquery〕
- Canvas Loader JS〔canvasタグ＋jquery〕
Html5 canvas loading animation effect
canvasタグ＋jquery
unknown
Html5 canvas loading animation effect
jquery.js
canvasタグで円弧を描画し、ローディングアニメーションを生成する方法が掲載されています。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.buildspinner=function(config){
var options={
size:20 /* 円の半径 */
}
var settings=$.extend(options, config);
return this.each(function(i){
var degrees=settings.size+10;
var x=settings.size*5/3;
var y=settings.size*5/3;
/* canvasタグを生成してDOMに追加 */
var canvas=document.createElement('canvas');
$(this).append(canvas);
/* コンテキストのリファレンスを取得 */
var ctx=canvas.getContext("2d");
var i=0, loops=0, degreesList=[];
for (i=0; i < degrees; i++) {
degreesList.push(i);
}
/* カウンタリセット */
i=0;
// so I can kill it later
window.canvasTimer=setInterval(draw, 1000/degrees);
/* canvasクリア */
function reset() {
ctx.clearRect(0,0,settings.size*5,settings.size*5);
var left=degreesList.slice(0, 1);
var right=degreesList.slice(1, degreesList.length);
degreesList=right.concat(left);
}
/* canvas描画 */
function draw() {
var c, s, e;
var d=0;
if (i == 0) reset();
/* 現在の状態をスタックの最後に追加 */
ctx.save();
/* 輪郭スタイル */
c=Math.floor(255/degrees*i);
ctx.strokeStyle='rgb(' + c + ', ' + c + ', ' + c + ')';
/* 線の幅 */
ctx.lineWidth=settings.size;
/* 現在のパスをリセット */
ctx.beginPath();
/* 円を描く */
d=degreesList[i];
s=Math.floor(360/degrees*(d));
e=Math.floor(360/degrees*(d+1)) - 1;
ctx.arc(x, y, settings.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
/* 現在のストローク・スタイルを使って、サブパスに線を引く */
ctx.stroke();
/* スタックの最後の状態を抜き出し、その状態をコンテキストに復元 */
ctx.restore();
i++;
if (i >= degrees) i=0;
}
});
};
})(jQuery);
$(function(){
$("#demo5").buildspinner({size:30});
$("#demo").buildspinner();
$("#demo2").buildspinner({size:15});
$("#demo3").buildspinner({size:10});
$("#demo4").buildspinner({size:5});
});
</script>
<style>
#wrap div div {
margin:10px;
border:1px solid #ccc;
width:100px; height:100px;
overflow:hidden;
float:left;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://www.htmldrive.net/items/show/15/Html5-canvas-loading-animation-effect' target='_blank'>Html5 canvas loading animation effect</a></p>
<!-- CODE -->
<div class="cf">
<div id="demo5"></div>
<div id="demo"></div>
<div id="demo2"></div>
<div id="demo3"></div>
<div id="demo4"></div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
Canvas Loader JS
canvasタグ＋jquery
2011/7/3
Canvas Loader Plugin 1.0
jquery.js、canvas-loader.js
ドットがくるくる回るローディングアニメーションをcanvasタグで生成するjQueryプラグイン。 ローダーのサイズ、背景色、ドットの色や大きさ、フレームレートなどをオプションで指定可能です。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/canvas-loader.js"></script>
<script type="text/javascript">
$(function(){
canvasLoaderReplace(document.getElementById("ajaxLoader"));
canvasLoaderReplace(
document.getElementById("ajaxLoader2"),
{
backgroundColor:'#ff6699',
radius:25,
color:'rgb(255,255,255)',
dotRadius:2,
fps:8
}
);
});
</script>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://jamund.com/canvas-loader/no.jquery.html' target='_blank'>Canvas Loader Plugin 1.0</a></p>
<!-- CODE -->
<div id="ajaxLoader"></div>
<span id="ajaxLoader2"></span>
<!-- / CODE -->
</div>
</body>
</html>