炫酷动态时钟—

今天分享一下用canvas做的动态时钟，原理和代码都很简单，不过还是可以做出很炫酷的效果，想学习canvas的小伙伴可以看一下。

效果图

HTML5的canvas的知识点

看源代码前先看一下canvas的基本知识点：
首先，找到 canvas 元素:

var c=document.getElementById(“myCanvas”);
然后，创建 context 对象：

var ctx=c.getContext(“2d”);
getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
例子：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

其中**arc()**方法的使用如下：
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

中心：arc(100,75,50,0Math.PI,1.5Math.PI)
起始角：arc(100,75,50,0,1.5Math.PI)
结束角：arc(100,75,50,0Math.PI,1.5*Math.PI)

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
圆渐变例子：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

fillRect(x,y,width,height) 方法定义了圆形当前的填充方式。

在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 “ink” 的方法，就像stroke().

文字、图片来源于 W3C官网和菜鸟教程

demo源码

下面来解析一下代码，下面是头部的代码，css样式就只有画布的样式，把画布放在页面中间。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>canvas {border: 1px solid black;position: absolute;left: 50%;top: 50%;margin-left: -250px;margin-top: -250px;}</style>
</head>

接下来是 body和javascript的代码，用原生js定义画布、画笔，画笔定义为2d画笔。
实现的原理就是获取当时的时间date，然后分别获取时、分、秒，然后定义一个方法，把输入的参数都变成度数，然后把时、分、秒加入参数当中，随着时、分、秒的变化，度数也随着变化，画笔的绘制也随之变化，这样动态时钟就完成了，大家可以看一下我下面的代码，代码有很多注释，比较容易看得懂。

<body><canvas width="500" height="500" id="myCanvas"></canvas><script>var myCanvas = document.getElementById('myCanvas');//取到上下文对象  画笔var ctx = myCanvas.getContext('2d');//画笔颜色 宽度ctx.strokeStyle = '#00ffff';ctx.lineWidth = 17;// 画笔的偏移量和阴影颜色ctx.shadowBlur = 15;ctx.shadowColor = '#00ffff'function renderTime() {//获取当前时间var date = new Date();var today = date.toDateString();var h = date.getHours();var m = date.getMinutes();var s = date.getSeconds();var ms = date.getMilliseconds();var rs = s + (ms/1000);//背景 圆弧（时分秒） 文字时间日期//渐变（250，250）中心点 5是半径 300是范围gradient = ctx.createRadialGradient(250,250,5,250,250,300);//规定渐变颜色 0-1gradient.addColorStop(0,'#03303a');gradient.addColorStop(1,'#000');// 将渐变颜色填充到画布ctx.fillStyle = gradient// 填充区域 坐标（0,0）到（500,500）ctx.fillRect(0,0,500,500);//开始起点路径ctx.beginPath();// (250,250)是圆心 200是半径 270是度数=起点位置,360 / 12 = 30，30就是每个小时转的度数,减去90度是因为起点在-π/2ctx.arc(250,250,200,deg(270),deg((h * 30) - 90));ctx.stroke();ctx.beginPath();// 360 / 60 = 6; ctx.arc(250,250,170,deg(270),deg((m * 6) - 90));ctx.stroke();ctx.beginPath();// 360 / 60 = 6;ctx.arc(250,250,140,deg(270),deg((rs * 6) - 90));ctx.stroke();//用画笔画上去ctx.font = '25px Helvetica';ctx.fillStyle = 'rgba(0,255,255,1)';ctx.fillText(today,155,250);var h = ('0' + h).slice(-2);var m = ('0' + m).slice(-2);var s = ('0' + s).slice(-2);//当时间为单位数的时候补零ctx.fillText(h + ':' + m + ':' + s + ':' + ms, 175,280);}setInterval(renderTime,40);// 将角度转成弧度function deg(deg){var f = Math.PI / 180;// π为180度。π/180等于1°只不过把传进来的数字变成度数返回 return f * deg;}</script>
</body>
</html>

感谢渡一教育尹文松老师的视频指导
侵权请联系

炫酷动态时钟——canvas相关推荐

canvas动画科技园_8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
给页面写一个炫酷的时钟特效【web前端】
文章目录一.前言二.想法设计/实现过程三.基本样式四.时间函数控制器五,时,分,秒占位六.时间动态填充一.前言今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页 ...
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
PR视频背景模板 6个创意炫酷动态短视频背景排版pr模板
PR视频背景模板 6个创意炫酷动态短视频背景排版pr模板这是一个时尚的Premiere Pro模板,包含6个独特的外观和动态动画的Instagram故事.他们是如此容易使用,只需编辑文本,拖放在你的 ...
网站首页炫酷动态背景实现
网站首页炫酷动态背景实现先贴出我苦找良久的网站动态背景图实现过程先来一个html简单的显示界面 <!doctype html> <html><head>< ...
需要个钟吗？教你制作一个简单又炫酷的时钟
制作时钟之前我们先要去了解一下JaveScript中的Date(日期)对象和计时器.这样我们就可以正确显示时间.然后一些炫酷部分就是HTML+CSS动画了. 话不多说,直接看代码吧. 1.首先把我们要 ...
用html实现炫酷罗马时钟
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200430141647148.gi ## 炫酷罗马时钟我们看一下运行效果这是代码可以复制 <!DOCT ...
Excel VBA实现超炫酷动态可视化图表
Excel VBA实现超宣炫酷动态图表数据来源于:国家统计局官网. 制作过程: ①数据准备原图表的数据来源是:http://www.ifs.du.edu,是各国的历史GDP数据,我也去找了这个数据 ...
Flutter自定义Widget实例 -如何创建炫酷粒子时钟效果！
周末发表了一篇文章<这个项目也太屌了吧>,给大家推荐了一个炫酷的Flutter粒子时钟项目,不过没有将具体实现思路和代码,所幸,作者自己写了一篇博客将这个项目的背景.实现思路.和所遇到的问 ...

炫酷动态时钟——canvas

效果图

HTML5的canvas的知识点

demo源码

炫酷动态时钟——canvas相关推荐

最新文章

热门文章