canvas画动画时钟的实例代码
今天的时间比较充裕，心血来潮，为大家分享一个html5的小例子，希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例，希望对你们的学习有帮助！高手嘛！请跳过吧！
我试水了画了一个时钟，和MDN的例子略有一点不同。I work it by myself！
<!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('canvas').getContext('2d');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的例子页：点我点我
和MDN的例子不同的是，MDN每次都要重绘整个时钟，而我的做法则将时钟表盘和3个指针分离开来，只需重绘指针。
我觉得这里有两个难点：一个是计算时分针的角度（分针走的同时，时针也会走一些角度）。一个是重绘指针的区域。
canvasRendingContext2D.rotate(angle)
这里Math.PI是半圆，半圆有6个小时，所以Math.PI/6是一个小时时针所走的弧度。
因为分针转完一圈，时针就走完1/12圈，所以计算时针对于minute所走的弧度可以这么计算：Math.PI*2/60*12 =>Math.PI/360
秒针同理。
第二，重绘指针。
若不重绘指针，1分钟之后，你将得到满是360度秒针的时钟。像这样：
那么如何才能重绘指针部分的区域呢？
我想到了裁剪。然后在裁剪的区域重绘。
这样就OK了！（啦啦啦啦啦，手舞足蹈啦啦啦啦~~~）
Atas ialah kandungan terperinci canvas画动画时钟的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1385
52
Animasi CSS: Cara Mencapai Kesan Kilat Elemen
Nov 21, 2023 am 10:56 AM
Animasi CSS: Bagaimana untuk mencapai kesan kilat elemen, contoh kod khusus diperlukan Dalam reka bentuk web, kesan animasi kadangkala boleh membawa pengalaman pengguna yang baik ke halaman. Kesan glitter ialah kesan animasi biasa yang boleh menjadikan elemen lebih menarik perhatian. Berikut akan memperkenalkan cara menggunakan CSS untuk mencapai kesan kilat elemen. 1. Pelaksanaan asas kilat Pertama, kita perlu menggunakan sifat animasi CSS untuk mencapai kesan kilat. Nilai atribut animasi perlu menentukan nama animasi, masa pelaksanaan animasi dan masa tunda animasi
![Animasi tidak berfungsi dalam PowerPoint [Tetap]](https://img.php.cn/upload/article/000/887/227/170831232982910.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Animasi tidak berfungsi dalam PowerPoint [Tetap]
Feb 19, 2024 am 11:12 AM
Adakah anda cuba membuat persembahan tetapi tidak boleh menambah animasi? Jika animasi tidak berfungsi dalam PowerPoint pada PC Windows anda, maka artikel ini akan membantu anda. Ini adalah masalah biasa yang dikeluhkan oleh ramai orang. Contohnya, animasi mungkin berhenti berfungsi semasa pembentangan dalam Microsoft Teams atau semasa rakaman skrin. Dalam panduan ini, kami akan meneroka pelbagai teknik penyelesaian masalah untuk membantu anda membetulkan animasi yang tidak berfungsi dalam PowerPoint pada Windows. Mengapa animasi PowerPoint saya tidak berfungsi? Kami mendapati bahawa beberapa sebab yang mungkin menyebabkan animasi dalam PowerPoint tidak berfungsi pada Windows adalah seperti berikut: Disebabkan oleh peribadi
Bagaimana untuk menyediakan animasi ppt untuk masuk dahulu dan kemudian keluar
Mar 20, 2024 am 09:30 AM
Kami sering menggunakan ppt dalam kerja harian kami, jadi adakah anda biasa dengan setiap fungsi operasi dalam ppt? Contohnya: Bagaimana untuk menetapkan kesan animasi dalam ppt, bagaimana untuk menetapkan kesan pensuisan, dan apakah tempoh kesan setiap animasi? Bolehkah setiap slaid bermain secara automatik, masuk dan kemudian keluar dari animasi ppt, dan lain-lain. Dalam isu ini, saya akan berkongsi dengan anda langkah-langkah khusus untuk memasuki dan kemudian keluar dari animasi ppt. Kawan, datang dan lihat. Lihatlah! 1. Mula-mula, kita buka ppt pada komputer, klik di luar kotak teks untuk memilih kotak teks (seperti yang ditunjukkan dalam bulatan merah dalam rajah di bawah). 2. Kemudian, klik [Animasi] dalam bar menu dan pilih kesan [Padam] (seperti yang ditunjukkan dalam bulatan merah dalam rajah). 3. Seterusnya, klik [
Selepas penangguhan selama dua tahun, filem animasi 3D domestik 'Er Lang Shen: The Deep Sea Dragon' dijadualkan ditayangkan pada 13 Julai.
Jan 26, 2024 am 09:42 AM
Laman web ini melaporkan pada 26 Januari bahawa filem animasi 3D domestik "Er Lang Shen: The Deep Sea Dragon" mengeluarkan satu set gambar pegun terbaharu dan secara rasmi mengumumkan bahawa ia akan dikeluarkan pada 13 Julai. Difahamkan bahawa "Er Lang Shen: The Deep Sea Dragon" diterbitkan oleh Mihuxing (Beijing) Animation Co., Ltd., Horgos Zhonghe Qiancheng Film Co., Ltd., Zhejiang Hengdian Film Co., Ltd., Zhejiang Gongying Film Co., Ltd., Chengdu Filem animasi terbitan Tianhuo Technology Co., Ltd. dan Huawen Image (Beijing) Film Co., Ltd. dan diarahkan oleh Wang Jun pada asalnya dijadualkan ditayangkan di tanah besar China pada 22 Julai 2022 . Sinopsis plot laman web ini: Selepas Pertempuran Dewa Yang Dikurniakan, Jiang Ziya mengambil "Senarai Tuhan Yang Dikurniakan" untuk membahagikan tuhan, dan kemudian Senarai Tuhan Yang Dikurniakan dimeterai oleh Mahkamah Syurga di bawah laut dalam Kyushu Alam Rahsia. Malah, selain menganugerahkan kedudukan ilahi, terdapat juga banyak roh jahat yang kuat yang dimeterai dalam Senarai Dewa Yang Diberikan.
Filem animasi Hayao Miyazaki 'Porco Rosso' telah dilanjutkan kepada 16 Januari tahun depan, dengan skor Douban 8.6
Dec 18, 2023 am 08:07 AM
Menurut berita dari laman web ini, filem animasi Hayao Miyazaki "Porco Rosso" telah mengumumkan bahawa ia akan melanjutkan tarikh tayangan hingga 16 Januari 2024. Laman web ini sebelum ini melaporkan bahawa "Porco Rosso" telah dilancarkan di Pawagam Talian Khas Persekutuan Seni Kebangsaan. pada 17 November, dengan box office kumulatif lebih 2,000 10,000, dengan skor Douban 8.6, dan 85.8% daripada ulasan 4 dan 5 bintang. "Porco Rosso" diterbitkan oleh Studio Ghibli dan diarahkan oleh Hayao Miyazaki Moriyama, Tokiko Kato, Otsuka Akio, Okamura Akemi dan lain-lain telah mengambil bahagian dalam alih suara. Ia pada asalnya dikeluarkan di Jepun pada tahun 1992. Filem ini diadaptasi daripada buku komik Hayao Miyazaki "The Age of Airships" dan menceritakan kisah juruterbang tentera Tentera Udara Itali Pollock Rosen yang secara ajaib berubah menjadi babi. Selepas itu, dia menjadi pemburu hadiah, melawan perompak udara dan melindungi orang di sekelilingnya. Sinopsis plot: Rosen ialah seorang askar dalam Perang Dunia I
Treler terakhir untuk filem claymation Netflix 'Chicken Run 2' telah diumumkan dan akan dikeluarkan pada 15 Disember
Nov 20, 2023 pm 01:21 PM
Treler terakhir untuk filem claymation Netflix "Chicken Run 2" telah dikeluarkan Filem ini dijangka akan dikeluarkan pada 15 Disember. Laman web ini mendapati bahawa treler untuk "Chicken Run 2" menunjukkan Chicken Loki dan King Kong untuk mencari anak perempuannya Molly. Molly dibawa pergi dengan trak di FunLand Farm, dan Rocky dan Ginger mempertaruhkan nyawa mereka untuk mendapatkan anak perempuan mereka. Filem ini diarahkan oleh Sam Fehr dan dibintangi oleh Sandy Way Newton, Zachary Levi, Bella Ramsey, Imelda Staunton dan David Bradley. Difahamkan, "Chicken Run 2" adalah sekuel kepada "Chicken Run" selepas lebih 20 tahun. Karya pertama dikeluarkan di China pada 2 Januari 2001. Ia mengisahkan sekumpulan ayam yang menghadapi nasib dijadikan pai ayam di sebuah kilang ayam.
Klip animasi Netflix 'Sonic: Homecoming' Musim 3 dikeluarkan, akan dikeluarkan tahun depan
Nov 12, 2023 am 09:25 AM
Netflix Maaf, saya boleh membantu anda menulis semula kandungan, tetapi saya perlu mengetahui kandungan asal yang ingin anda tulis semula. Bolehkah anda memberikannya kepada saya? Klip dari musim ketiga siri animasi "Sonic: Homecoming Adventures" telah diumumkan pada Minggu Geek, yang dijangka akan dilancarkan pada tahun 2024. Maaf, saya boleh membantu anda menulis semula kandungan, tetapi saya perlu tahu perkara yang anda mahu menulis semula. Bolehkah anda memberikannya kepada saya? Mengikut pemahaman kami, "Sonic: Homecoming Adventure" dihasilkan oleh Sega dan WildBrain Maaf, saya boleh membantu anda menulis semula kandungan, tetapi saya perlu mengetahui kandungan asal yang ingin anda tulis semula. Bolehkah anda memberikannya kepada saya? Studio Maaf, saya boleh membantu anda menulis semula kandungan, tetapi saya perlu mengetahui kandungan asal yang anda mahu tulis semula. Bolehkah anda memberikannya kepada saya? dan maaf saya boleh membantu anda menulis semula kandungan tetapi saya perlukan
Penjana Seni Animasi AI Percuma Terbaik
Feb 19, 2024 pm 10:50 PM
Jika anda tidak sabar-sabar untuk mencari penjana seni animasi AI percuma teratas, anda boleh menamatkan carian anda. Dunia seni anime telah menawan penonton selama beberapa dekad dengan reka bentuk watak yang unik, warna yang menawan dan plot yang menawan. Walau bagaimanapun, mencipta seni anime memerlukan bakat, kemahiran, dan banyak masa. Walau bagaimanapun, dengan pembangunan kecerdasan buatan (AI) yang berterusan, anda kini boleh meneroka dunia seni animasi tanpa perlu mendalami teknologi yang kompleks dengan bantuan penjana seni animasi AI percuma yang terbaik. Ini akan membuka kemungkinan baharu untuk anda melancarkan kreativiti anda. Apakah penjana seni anime AI? Penjana Seni Animasi AI menggunakan algoritma canggih dan teknik pembelajaran mesin untuk menganalisis pangkalan data karya animasi yang luas. Melalui algoritma ini, sistem mempelajari dan mengenal pasti gaya animasi yang berbeza
