キャンバス上にアニメーション時計を描画するサンプルコード-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

キャンバス上にアニメーション時計を描画するサンプルコード

巴扎黑

Jul 24, 2017 pm 02:31 PM

canvas アニメーション

，今日は十分な時間であり、HTML5 の小さな例を、HTML5 を学習する準備ができている、または学習していない「子供向け」に示したいと思います。あなたの学習に役立ちます！なんてマスターなんだ！飛ばしてください！

MDN の例とは少し異なる、水を試して時計を描きました。自分で作ってますよ！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>Title</title>
</head><body onload="draw()">
<canvas id="canvas" width="300" height="300">
</canvas>
<script>
function init()
{
var ctx = document.getElementById('canvas').getContext('2d');

        ctx.save();
        ctx.clearRect(0,0,300,300);
        ctx.translate(150,150);
        ctx.lineWidth = 4;
        ctx.strokeStyle = "#a77";
        ctx.beginPath();
        ctx.arc(0,0,100,0,Math.PI*2,true);
        ctx.stroke();
        ctx.rotate(-Math.PI/2);//minute mark        ctx.save();for(var i = 0;i<60;i++){if(i%5 != 0){
                ctx.beginPath();
                ctx.moveTo(90,0);
                ctx.lineTo(94,0);
                ctx.stroke();
            }
            ctx.rotate(Math.PI/30);        }
        ctx.restore();//hour mark        ctx.save();for(var i=1;i<=12;i++){
            ctx.beginPath();
            ctx.moveTo(85,0);
            ctx.lineTo(95,0);
            ctx.stroke();
            ctx.rotate(Math.PI/6);        }
        ctx.restore();
        window.requestAnimationFrame(clock);
    }function clock() {var ctx = document.getElementById(&#39;canvas&#39;).getContext(&#39;2d&#39;);var now = new Date();var sec = now.getSeconds();var min = now.getMinutes();var hr = now.getHours();
        hr = hr>=12 ? hr-12 : hr;

        ctx.beginPath();
        ctx.arc(0,0,82,0,Math.PI*2,false);
        ctx.clip();
        ctx.clearRect(-90,-90,180,180);//write hour        ctx.save();
        ctx.lineWidth = 6;
        ctx.rotate(hr*Math.PI/6 + min*Math.PI/360 + sec*Math.PI/21600);        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(50,0);
        ctx.stroke();
        ctx.restore();//write minute        ctx.save();
        ctx.lineWidth = 3;
        ctx.rotate(min*Math.PI/30 + sec*Math.PI/1800);
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(65,0);
        ctx.stroke();
        ctx.restore();//write second        ctx.save();
        ctx.lineWidth = 1;
        ctx.rotate(sec*Math.PI/30);        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(80,0);
        ctx.stroke();
        ctx.restore();

        window.requestAnimationFrame(clock);
    }

    init();
    </script>
    </body>
    </html>

ログイン後にコピー

コードを表示

これは MDN のサンプルページです: Click me click me

MDN の例との違いは、MDN は毎回時計全体を再描画する必要があり、私のアプローチは個別であることです。時計の文字盤と 3 つの針を変更し、針を再描画するだけです。

ここには 2 つの困難があると思います。1 つは、時針と分針の角度を計算することです (分針が動くと、時針もある程度の角度で動きます)。 1 つは、ポインタが再描画される領域です。

canvasRendingContext2D.rotate(angle)

ここで Math.PI は半円で、その半円は 6 時間なので、Math.PI/6 は短針が 1 時間で移動する円弧です。

分針が 1 回転すると、時針も 1/12 回転するため、分に対して時針が移動する円弧は次のように計算できます: Math.PI*2/60*12 =>Math .PI/360

中古でも同様です。

次に、ポインタを再描画します。

針を描き直さなければ、1分後には360度秒針がいっぱいの時計が完成します。このように:

では、ポインタ部分の領域を再描画するにはどうすればよいでしょうか?

トリミングを考えました。次に、クリップされた領域を再描画します。

それだけです！ (ラララララ、踊ってララララ~~~)

以上がキャンバス上にアニメーション時計を描画するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7467

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

CSS アニメーション: 要素のフラッシュ効果を実現する方法 Nov 21, 2023 am 10:56 AM

CSS アニメーション: 要素のフラッシュ効果を実現する方法、具体的なコード例が必要です。Web デザインでは、アニメーション効果がページに優れたユーザーエクスペリエンスをもたらすことがあります。グリッター効果は、要素をより目を引くようにできる一般的なアニメーション効果です。 CSSを使って要素のフラッシュ効果を実現する方法を紹介します。 1. フラッシュの基本的な実装まず、フラッシュ効果を実現するには、CSS のアニメーションプロパティを使用する必要があります。アニメーション属性の値には、アニメーション名、アニメーション実行時間、アニメーション遅延時間を指定する必要があります。

PowerPoint でアニメーションが機能しない [修正] Feb 19, 2024 am 11:12 AM

プレゼンテーションを作成しようとしていますが、アニメーションを追加できませんか? Windows PC 上の PowerPoint でアニメーションが機能しない場合は、この記事が役に立ちます。これは多くの人が不満を抱く一般的な問題です。たとえば、Microsoft Teams でのプレゼンテーション中または画面録画中にアニメーションが停止する場合があります。このガイドでは、Windows 上の PowerPoint で動作しないアニメーションを修正するのに役立つさまざまなトラブルシューティングテクニックを説明します。 PowerPoint アニメーションが機能しないのはなぜですか? Windows 上で PowerPoint のアニメーションが機能しない問題を引き起こす可能性のある考えられる理由として、次のようなことが考えられます。

最初に入力してから終了するように ppt アニメーションを設定する方法 Mar 20, 2024 am 09:30 AM

私たちは日々の仕事で ppt をよく使用しますが、ppt のすべての操作機能に精通していますか?例: ppt でアニメーション効果を設定する方法、切り替え効果を設定する方法、各アニメーションの効果時間はどれくらいですか?各スライドは自動的に再生されますか、ppt アニメーションの開始と終了などはできますか? 今回は、まず ppt アニメーションの開始と終了の具体的な手順を共有します。以下にあります。友達、見に来てください。見て！ 1. まず、コンピューターで ppt を開き、テキストボックスの外側をクリックしてテキストボックスを選択します (下図の赤い丸で示されているように)。 2. 次に、メニューバーの[アニメーション]をクリックし、[消去]効果を選択します(図の赤丸部分)。 3. 次に、[

2年の遅れを経て、国産3Dアニメ映画『エル・ランシェン：深海竜』が7月13日に公開予定 Jan 26, 2024 am 09:42 AM

当サイトは1月26日、国産3Dアニメ映画『エル・ランシェン：深海竜』が最新スチールを公開し、7月13日に公開されると正式に発表したと報じた。「Er Lang Shen: The Deep Sea Dragon」は、Mihuxing (Beijing) Movie Co., Ltd.、Horgos Zhonghe Qiancheng Film Co., Ltd.、Zhejiang Hengdian Film Co., Ltd.、Zhejiang Gongying Film によって制作されていることがわかります。 Tianhuo Technology Co., Ltd.とHuawen Image (Beijing) Film Co., Ltd.が制作し、Wang Junが監督したこのアニメーション映画は、当初、2022年7月22日に中国本土で公開される予定でした。。このサイトのあらすじ：授与神の戦いの後、蒋子耶が神々を分割するために「授与神リスト」を持ち出し、授与神リストは天宮によって九州の深海に封印された秘密の領域。実は、授与神リストには神職以外にも強力な悪霊が数多く封印されている。

Netflixのクレイメーション映画『チキン・ラン2』の最終予告編が発表され、12月15日に公開される予定だ。 Nov 20, 2023 pm 01:21 PM

Netflix のクレイメーション映画「チキンラン 2」の最終予告編が公開されました。映画は 12 月 15 日公開予定です。当サイトは、「チキンラン 2」の予告編にチキンロキとキングコングが映っていることに気づきました。ジェイは作戦を開始します。娘のモリーを探すために。モリーはファンランド・ファームでトラックに連れ去られ、ロッキーとジンジャーは命がけで娘を取り戻そうとする。この映画はサム・フェールが監督し、サンディ・ウェイ・ニュートン、ザカリー・リーヴァイ、ベラ・ラムジー、イメルダ・スタウントン、デヴィッド・ブラッドリーが出演する。『チキンラン2』は『チキンラン』の20年以上ぶりの続編であることが分かりました。最初の作品は、2001 年 1 月 2 日に中国で公開されました。この作品は、鶏肉工場でチキンパイに変えられる運命に直面するニワトリのグループの物語です。

宮崎駿監督のアニメーション映画『紅の豚』が来年1月16日まで延長され、ドゥバンスコアは8.6となった。 Dec 18, 2023 am 08:07 AM

当サイトのニュースによると、宮崎駿監督のアニメーション映画『紅の豚』が、公開日を2024年1月16日まで延長すると発表した。本サイトは以前、『紅の豚』が全国芸術連盟特別ラインシネマで上映開始されたことを報じた。 11月17日に公開され、累計興行収入は2,000万10,000を超え、Doubanスコアは8.6、4つ星と5つ星のレビューの85.8%を獲得した。『紅の豚』はスタジオジブリ制作、宮崎駿監督、森山守山、加藤登紀子、大塚明夫、岡村明美らが吹き替えに参加し、1992年に日本で公開された。この映画は宮崎駿の漫画『飛行船の時代』を原作とし、魔法で豚に変えられたイタリア空軍のエースパイロット、ポロック・ローゼンの物語を描いている。その後、彼は賞金稼ぎとなり、空中強盗と戦い、周囲の人々を守りました。あらすじ: ローゼンは第一次世界大戦の兵士です

Netflixアニメシリーズ「ソニック：ホームカミング」シーズン3クリップ公開、来年公開予定 Nov 12, 2023 am 09:25 AM

Netflix 申し訳ありませんが、コンテンツのリライトをお手伝いできますが、リライトしたい元のコンテンツを知る必要があります。提供してもらえますか？アニメシリーズ「ソニック: ホームカミングアドベンチャーズ」の第 3 シーズンのクリップが、2024 年に開始される予定のギークウィークで発表されました。申し訳ありませんが、内容の書き換えを手伝うことはできますが、何をしたいのかを知る必要があります。リライト。オリジナルのコンテンツ。提供してもらえますか？このサイトによると、「Sonic: Homecoming Adventure」は Sega と WildBrain によって制作されています。申し訳ありませんが、コンテンツのリライトを手伝うことはできますが、リライトしたい元のコンテンツを知る必要があります。提供してもらえますか？ Studio 申し訳ありませんが、コンテンツのリライトをお手伝いできますが、リライトしたい元のコンテンツを知る必要があります。提供してもらえますか？申し訳ありませんが、内容を書き直すのを手伝うことはできますが、必要です

最高の無料 AI アニメーションアートジェネレーター Feb 19, 2024 pm 10:50 PM

トップの無料 AI アニメーションアートジェネレーターを見つけたい場合は、検索を終了することができます。アニメアートの世界は、そのユニークなキャラクターデザイン、魅惑的な色彩、魅惑的なプロットで何十年にもわたって視聴者を魅了してきました。ただし、アニメアートの作成には才能、スキル、そして多くの時間が必要です。しかし、人工知能 (AI) の継続的な発展により、最高の無料 AI アニメーションアートジェネレーターの助けを借りて、複雑なテクノロジーを深く掘り下げることなくアニメーションアートの世界を探索できるようになりました。これにより、創造性を発揮するための新たな可能性が開かれます。 AIアニメアートジェネレーターとは？ AI アニメーションアートジェネレーターは、高度なアルゴリズムと機械学習技術を利用して、アニメーション作品の広範なデータベースを分析します。これらのアルゴリズムを通じて、システムはさまざまなアニメーションスタイルを学習し、識別します。

See all articles

キャンバス上にアニメーション時計を描画するサンプルコード

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック