コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > Canvas - タイマーを使用して動的読み込みアニメーションをシミュレートします。

Canvas - タイマーを使用して動的読み込みアニメーションをシミュレートします。

高洛峰
リリース： 2016-10-12 11:05:07
オリジナル
1817 人が閲覧しました

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

    </style>
</head>
<body>
   <canvas id="canvas" width="500" height="500">你的浏览器不支持canvas技术</canvas>
   <script>
       var c=document.getElementById(&#39;canvas&#39;);
       var ctx= c.getContext(&#39;2d&#39;);
       ctx.translate(c.width/2, c.height/2);
       //首先绘制8个静态环绕的圆形
       function create() {
           for (var i = 1; i < 9; i++) {
               if (i==1) {
                   ctx.beginPath();
                   ctx.arc(0, -30, 5, 0, 2 * Math.PI);
                   ctx.fillStyle=&#39;#f0f&#39;;
                   ctx.fill();
               }else{
                   ctx.beginPath();
                   ctx.arc(0, -30, 5, 0, 2 * Math.PI);
                   ctx.strokeStyle =&#39;#000&#39;;
                   ctx.stroke();
               }
               ctx.rotate(Math.PI * 45 / 180);
           }
       }
       //定时转动
       setInterval(function(){
           ctx.clearRect(-c.width/2,-c.height, c.width, c.height);
           create();
           ctx.rotate(Math.PI*45/180);
       },300);
       //定时关闭加载
       setTimeout(function(){
          c.style.display=&#39;none&#39;;
      },12200);
       //
   </script>
</body>
</html>
ログイン後にコピー


関連ラベル：
Canvas——使用定时器模拟动态加载动画！
ソース：php.cn
前の記事：html5 video.js を使用し、すべてのブラウザと互換性があります 次の記事：HTML5に基づいて、親ブロックにビデオを追加すると全画面で再生できない問題が解決されます。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2039
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2199
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1853
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1745
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1765
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート