実行結果
設置サンプルのソース
<!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>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<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>