JavaScript Canvas绘制圆形时钟效果
更新时间：2020年08月20日 14:33:47 作者：晋级的菜鸟
这篇文章主要为大家详细介绍了JavaScript Canvas绘制圆形时钟效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Canvas时钟效果展示的具体代码，供大家参考，具体内容如下
<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();
//数字
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);
}
//点
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();
}
}
//时针
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();
}
//圆点
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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于如何使用js查找数组中符合条件的元素,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-04-04
window.name代替cookie的实现代码，需要的朋友可以参考下。2010-11-11
基于HTML模板和JSON数据的JavaScript交互(移动端)
这篇文章主要介绍了基于HTML模板和JSON数据的JavaScript交互(移动端)的相关资料,需要的朋友可以参考下2016-04-04
本文给大家分享的是使用javascript实现的一个简单的弹出窗的代码，非常的简单实用，有需要的小伙伴可以参考下2016-02-02
用户代理字符串:navigator.userAgent ，本文给大家分享用户代理字符串userAgent可实现的四个识别，需要的朋友可以参考下2015-09-09
这篇文章主要介绍了js中实现继承的五种方法，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了JavaScript柯里化函数式编程，JS柯里化是前端面试中最常见的问题之一，它可以让你的代码更简洁，工作更高效，感兴趣想要详细了解可以参考下文2023-05-05
这篇文章主要介绍了三种JavaScript中常用的函数类型，包括匿名函数、动态函数、可变参数函数，感兴趣的小伙伴们可以参考一下2015-11-11
最近在小程序里，做了一个类似微博刷视频的需求，其中有一部分功能需要实现自定义进度条，在做完第一版之后发现进度条不顺滑，而后想查查网上看有没有什么好的方案，但最终没找到合适的。下面给大家分享JS进度条顺滑版实现代码，需要的朋友参考下吧2021-08-08
这篇文章主要介绍了利用JavaScript实现的十种排序算法，主要介绍了冒泡，选择，插入，希尔，归并，快速，堆排，计数，桶排和基数，有感兴趣的小伙伴可以参考阅读本文2023-05-05
最新评论