canvas繪制表盤時鐘

更新時間：2017年01月23日 10:21:56 作者：艾瑞卡

本文主要分享了canvas繪制表盤時鐘的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧

話不多說，請看代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>canvas繪制表盤</title>
</head>
<body>
 <canvas id='box' width="500" height="500" >
 您的瀏覽器不支持canvas
 </canvas>
 <script>
 var box = document.getElementById('box');
 var cxt = box.getContext('2d');
 // 時鐘動起來
 var timer = null;
 function clock(){
 var date = new Date();
 var h = date.getHours();
 h = h + h/60;
 h = h>12? h-12:h;
 var m = date.getMinutes();
 var s = date.getSeconds();
 // 清畫布
 cxt.clearRect(0,0,500,500); 
 // 畫表盤
 cxt.strokeStyle = '#f0f';
 cxt.lineWidth = 6;
 cxt.beginPath();
 cxt.arc(250,250,100,0,2*Math.PI);
 cxt.stroke();
 // 畫時鐘刻度
 for(var i=0; i<12; i++){
 cxt.save();
 cxt.translate(250,250);
 cxt.rotate(30*i*Math.PI/180);
 cxt.lineWidth = 3;
 cxt.beginPath();
 cxt.moveTo(0,-80);
 cxt.lineTo(0,-92);
 cxt.stroke();
 cxt.restore();
 }
 //畫分鐘刻度
 for(var i=0; i<60; i++){
 cxt.save();
 cxt.translate(250,250);
 cxt.rotate(6*i*Math.PI/180);
 cxt.lineWidth = 2;
 cxt.beginPath();
 cxt.moveTo(0,-86);
 cxt.lineTo(0,-92);
 cxt.stroke();
 cxt.restore();
 }
 // 畫時針
 cxt.save();
 cxt.lineWidth = 5;
 cxt.translate(250,250);
 cxt.rotate(h*30*Math.PI/180);
 cxt.beginPath();
 cxt.moveTo(0,6);
 cxt.lineTo(0,-40);
 cxt.stroke();
 cxt.restore();
 // 畫分針
 cxt.save();
 cxt.lineWidth = 3;
 cxt.translate(250,250);
 cxt.rotate(m*6*Math.PI/180);
 cxt.beginPath();
 cxt.moveTo(0,8);
 cxt.lineTo(0,-60);
 cxt.stroke();
 cxt.restore();
 // 畫秒針
 cxt.save();
 cxt.lineWidth = 1;
 cxt.translate(250,250);
 cxt.rotate(s*6*Math.PI/180);
 cxt.beginPath();
 cxt.moveTo(0,10);
 cxt.lineTo(0,-75);
 cxt.stroke();
 cxt.restore();
 // 畫中心的小圓固定三根針
 cxt.save();
 cxt.beginPath();
 cxt.fillStyle = '#0f0';
 cxt.lineWidth = 2;
 cxt.translate(250,250);
 cxt.arc(0,0,2,0,360,false);
 cxt.stroke();
 cxt.fill();
 cxt.restore();
 // 畫秒針上的園
 cxt.save();
 cxt.fillStyle = '#f00';
 cxt.lineWidth = 2;
 cxt.translate(250,250);
 cxt.rotate(s*6*Math.PI/180);
 cxt.beginPath();
 cxt.arc(0,-60,2,0,360,false);
 cxt.stroke();
 cxt.fill();
 cxt.restore();
 }
 clock();
 timer = setInterval(clock,1000);
 </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

微信小程序之 catalog 切換實現(xiàn)解析
這篇文章主要介紹了微信小程序之 catalog 切換實現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-09-09
Typescript 中的 interface 和 type 到底有什么區(qū)別詳解
這篇文章主要介紹了Typescript 中的 interface 和 type 到底有什么區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
javascript客戶端解決方案緩存提供程序
這是介紹的是一個不錯的javascript的方面的客戶端解決方案,可選配支持HTML5本地存儲器.
2010-07-07
bootstrap fileinput插件實現(xiàn)預(yù)覽上傳照片功能
這篇文章主要介紹了bootstrap fileinput插件實現(xiàn)預(yù)覽上傳照片功能,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2018-01-01
js實現(xiàn)淡入淡出輪播切換功能
本文主要分享了javascript實現(xiàn)淡入淡出輪播切換功能的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
js實現(xiàn)鍵盤自動打字效果
本文主要介紹了基于jQuery實現(xiàn)的簡單版鍵盤自動打字效果，具有很好的參考價值，下面就跟著小編一起來看下吧
2016-12-12
js數(shù)組依據(jù)下標(biāo)刪除元素
一直在使用js相關(guān)的東西，但很少作總結(jié)，今天遇到操作js數(shù)組的一些問題，對js的數(shù)組有了更進(jìn)一步的認(rèn)識
2015-04-04
在微信小程序中使用vant的方法
這篇文章主要介紹了在微信小程序中使用vant的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
微信小程序scroll-view實現(xiàn)左右聯(lián)動
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實現(xiàn)左右聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
淺談layui框架自帶分頁和表格重載的接口解析問題
今天小編就為大家分享一篇淺談layui框架自帶分頁和表格重載的接口解析問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09