JavaScript Canvas繪制圓形時(shí)鐘效果
更新時(shí)間:2020年08月20日 14:33:47 作者:晉級(jí)的菜鳥
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas繪制圓形時(shí)鐘效果的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Canvas時(shí)鐘效果展示的具體代碼,供大家參考,具體內(nèi)容如下
<html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> canvas{ display: block; margin: 0 auto; background-color: #fdffad; border: 1px solid #000; } </style> <script type="text/javascript"> document.addEventListener('DOMContentLoaded',function(){ var oC=document.querySelector('canvas'); var gd=oC.getContext('2d'); var r=oC.width/2; function drawBackground() { gd.save(); //漸變 var ra = gd.createLinearGradient(600, 0, 400, 0); ra.addColorStop(1, '#2dd9ff'); ra.addColorStop(0, '#8c48dd'); //表盤 gd.translate(r, r); gd.beginPath(); gd.fillStyle = ra; gd.lineWidth = 10; gd.strokeStyle = '#211f4e'; gd.arc(0, 0, r-5, 0, Math.PI *2, false); gd.fill(); gd.stroke(); //數(shù)字 for (var i = 1; i < 13; i++) { var rad=i * Math.PI * 2 / 12; var x = Math.sin(rad)*(r-70); var y= -Math.cos(rad)*(r-70); gd.fillStyle = "red"; gd.font = "bold 80px Calibri"; gd.lineWidth = 1; gd.textAlign = 'center'; gd.textBaseline = 'middle'; gd.strokeText(i, x, y); } //點(diǎn) for (var i = 0; i < 60; i++) { gd.beginPath(); var rad=i * Math.PI * 2 / 60; var x = Math.sin(rad)*(r-30); var y= -Math.cos(rad)*(r-30); if (i % 5 == 0) { gd.fillStyle = 'red'; } else { gd.fillStyle = '#ccc' } gd.lineWidth = 2; gd.arc(x, y, 6, 0, Math.PI * 2, false); gd.fill(); gd.stroke(); gd.closePath(); } } //時(shí)針 function drawHour(h,m){ gd.save(); gd.beginPath(); var rad=2*Math.PI/12*h; var mrad=2*Math.PI/12/60*m; gd.rotate(rad+mrad); gd.lineWidth=20; gd.lineCap='round'; gd.moveTo(0,10); gd.lineTo(0,-r/3); gd.stroke(); gd.closePath(); gd.restore(); } //分針 function drawMinutes(m){ gd.save(); gd.beginPath(); var rad=2*Math.PI/60*m; gd.rotate(rad); gd.lineWidth=10; gd.lineCap='round'; gd.moveTo(0,10); gd.lineTo(0,-r/2); gd.stroke(); gd.closePath(); gd.restore(); } //秒針 function drawSeconds(s){ gd.save(); gd.beginPath(); var rad=2*Math.PI/60*s; gd.rotate(rad); gd.fillStyle='red'; gd.moveTo(-2,20); gd.lineTo(2,20); gd.lineTo(1,-r+100); gd.lineTo(-1,-r+100); gd.fill(); gd.closePath(); gd.restore(); } //圓點(diǎn) function drawPoint(){ gd.beginPath(); gd.fillStyle='#fff'; gd.arc(0,0,5,Math.PI*2,false); gd.fill(); } function drawClock(){ gd.clearRect(0,0,oC.width,oC.height); var oDate=new Date(); var h=oDate.getHours(); var m=oDate.getMinutes(); var s=oDate.getSeconds(); drawBackground(); drawHour(h,m); drawMinutes(m); drawSeconds(s); drawPoint(); gd.restore(); } drawClock(); setInterval(drawClock,1000); },false); </script> </head> <body> <canvas width="800" height="800"></canvas> </body> </html>
效果圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript canvas實(shí)現(xiàn)文字時(shí)鐘
- 使用js和canvas實(shí)現(xiàn)時(shí)鐘效果
- JavaScript canvas動(dòng)畫實(shí)現(xiàn)時(shí)鐘效果
- JavaScript Canvas編寫炫彩的網(wǎng)頁時(shí)鐘
- javascript+HTML5 canvas繪制時(shí)鐘功能示例
- JS+H5 Canvas實(shí)現(xiàn)時(shí)鐘效果
- JS+Canvas繪制動(dòng)態(tài)時(shí)鐘效果
- js Canvas繪制圓形時(shí)鐘效果
- js Canvas實(shí)現(xiàn)的日歷時(shí)鐘案例分享
- js Canvas實(shí)現(xiàn)圓形時(shí)鐘教程
- js基于canvas實(shí)現(xiàn)時(shí)鐘組件
相關(guān)文章
window.name代替cookie的實(shí)現(xiàn)代碼
window.name代替cookie的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-11-11基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)
這篇文章主要介紹了基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動(dòng)端)的相關(guān)資料,需要的朋友可以參考下2016-04-04javascript實(shí)現(xiàn)一個(gè)簡單的彈出窗
本文給大家分享的是使用javascript實(shí)現(xiàn)的一個(gè)簡單的彈出窗的代碼,非常的簡單實(shí)用,有需要的小伙伴可以參考下2016-02-02用戶代理字符串userAgent可實(shí)現(xiàn)的四個(gè)識(shí)別
用戶代理字符串:navigator.userAgent ,本文給大家分享用戶代理字符串userAgent可實(shí)現(xiàn)的四個(gè)識(shí)別,需要的朋友可以參考下2015-09-09JS實(shí)現(xiàn)進(jìn)度條順滑版詳細(xì)方案
最近在小程序里,做了一個(gè)類似微博刷視頻的需求,其中有一部分功能需要實(shí)現(xiàn)自定義進(jìn)度條,在做完第一版之后發(fā)現(xiàn)進(jìn)度條不順滑,而后想查查網(wǎng)上看有沒有什么好的方案,但最終沒找到合適的。下面給大家分享JS進(jìn)度條順滑版實(shí)現(xiàn)代碼,需要的朋友參考下吧2021-08-08利用JavaScript實(shí)現(xiàn)的10種排序算法總結(jié)
這篇文章主要介紹了利用JavaScript實(shí)現(xiàn)的十種排序算法,主要介紹了冒泡,選擇,插入,希爾,歸并,快速,堆排,計(jì)數(shù),桶排和基數(shù),有感興趣的小伙伴可以參考閱讀本文2023-05-05