Search
  1. Html5 canvas loading animation effect〔canvasタグ+jquery〕
  2. 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.0By Jamund Xcot Ferguson

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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women