canvas制作的简单时钟特效

最新推荐文章于 2022-04-19 17:04:24 发布
最新推荐文章于 2022-04-19 17:04:24 发布
阅读量401 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suweim/article/details/73650733
版权
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟特效</title>
<style>
#canvas{
border:1px solid #ccc;
display:block;
margin:0 auto;
}
</style>
</head>
<body>
<canvas id="canvas">
<p>测试浏览器是否支持canvas</p>
</canvas>
</body>
<script>
var can=document.getElementById('canvas');
//设置宽度和高度
can.width=600;
can.height=500;
//获取2d绘制对象
var cxt=can.getContext('2d');
//绘制钟表
function draw(){
var r=200;
//存储当前状态
cxt.save();
//绘制图
cxt.beginPath();
cxt.arc(300,250,r,0,Math.PI*2);
// lineWidth(5)
cxt.fillStyle='#fff';
cxt.fill();
cxt.strokeStyle = '#FF33CC';
cxt.lineWidth = 5;
cxt.stroke();
cxt.closePath();
//移动原点到
cxt.translate(300,250);
//绘制时间


  for(var i=0; i<60; i++){
            if(i%5 == 0){
                cxt.beginPath();
                cxt.moveTo(0,200);
                cxt.lineTo(0,186);
                cxt.lineWidth = 4;
                cxt.strokeStyle = "#FF33CC";
                cxt.stroke();
                cxt.rotate(Math.PI/30);
            }else{
                cxt.beginPath();
                cxt.moveTo(0,200);
                cxt.lineTo(0,192);
                cxt.lineWidth = 1;
                cxt.strokeStyle = "#FF33CC";
                cxt.stroke();
                cxt.rotate(Math.PI/30);
            }
        }
//当前时间
var now=new Date();
//获取当前的小时
var hour=now.getHours();
//获取当前的分钟
var minute=now.getMinutes();
//当前的妙数
var second=now.getSeconds();
// 时针
// 秒针每一秒要动 Math.PI*2 / 60
cxt.save()
cxt.rotate(Math.PI*2*hour/12);


cxt.beginPath();
cxt.moveTo(0,10);
cxt.lineTo(0,-80);
// 秒针红色
cxt.strokeStyle = '#FF0033';
cxt.lineWidth = 5;
cxt.stroke();
cxt.closePath();
// 恢复
cxt.restore();
// 绘制分针
// 秒针每一秒要动 Math.PI*2 / 60
cxt.save()
cxt.rotate(Math.PI*2*minute/60);
cxt.beginPath();
cxt.moveTo(0,20);
cxt.lineTo(0,-120);
// 秒针红色
cxt.strokeStyle = '#FF0066';
cxt.lineWidth = 3;
cxt.stroke();
cxt.closePath();
// 恢复
cxt.restore();
// 秒针每一秒要动 Math.PI*2 / 60
cxt.save()
cxt.rotate(Math.PI*2*second/60);
cxt.beginPath();
cxt.moveTo(0,30);
cxt.lineTo(0,-175);
cxt.strokeStyle = '#FF0099';
cxt.stroke();
cxt.closePath();
// 回复
cxt.restore();
// 以该原点绘制一个红色的小圆
cxt.beginPath();
cxt.arc(0,0,5,0,Math.PI*2);
cxt.fillStyle = 'red';
cxt.fill();
cxt.closePath();
// 都绘制结束之后，将原点切换到0,0
cxt.restore();
}
draw();
setInterval(function(){
// 清除一次画布
cxt.clearRect(0,0,600,500)
// 重绘面板
draw();
},1000)
</script>
</html>
suweim
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
15款基于canvas时钟特效
01-10
15款基于canvas的时钟特效，html5中的canvas制作炫酷时钟
Canvas绘制一个时钟
秃头小桂子
05-11 2252
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
H5 canvas 制作简易时钟
id_no_chinese的博客
07-10 1218
学习了canvas，写下自己的心得体会。1.在css中设置canvas的宽和高，发现里面的矩形和其他元素都是放大的。然后自己得出结论：1.canvas的宽高属性要写在 标签内canvas的默认宽高为300*150，如果宽高设置相对默认值的x倍，你所画的元素也会相对你设置的扩大x倍。亲自实验发现真是这样。但是这样画布中的元素宽高就不好控制了。第二天发现把 宽高以属性值的方式写到标签中时，元素和你设置...
制作网页版电子时钟特效
皮小孩的博客
05-02 2364
可以加我QQ1975728171代做 一、语言和环境 A、实现语言 JavaScript B、环境要求 Dreamweaver、WebStorm、Sublime任选其一 二、功能要求 利用JavaScript编程语言，制作网页版的电子时钟特效作品。 实现功能： 1.可以在网页上显示系统的当前日期，例如“2021年06月09日”，要求对于个位数的月份或者日期，自动补全两位，例如“6”月，显示“06”，“9”日，显示“09”； 2.可以在网页上显示系统的当前时间，例如“16:35:08”，要求对于个位数的时间，
HTML5 Canvas 动画时钟
04-08
NULL 博文链接：https://mooring.iteye.com/blog/1594032
HTML5 Canvas圆形灯笼时钟动画特效
06-24
在实际项目中，这样的时钟特效可能会结合其他前端框架，如jQuery或者Vue.js，来简化DOM操作和状态管理。例如，使用Vue.js的响应式数据绑定，可以轻松地将时间数据与视图同步，使得时钟实时更新。 在提供的压缩文件...
HTML5 Canvas水里数字时钟特效.zip
最新发布
11-02
这个"HTML5 Canvas水里数字时钟特效.zip"文件显然包含了一个使用Canvas元素制作的、具有水波纹效果的数字时钟特效。下面我们将深入探讨HTML5 Canvas、jQuery特效、CSS特效以及它们在网页设计中的应用。 1. ...
HTML5 Canvas红色灯笼时钟动画特效代码
03-20
在这个“HTML5 Canvas红色灯笼时钟动画特效代码”项目中，开发者利用Canvas API创建了一个独特的红色灯笼风格的时钟动画。这个时钟不仅具有红色的视觉吸引力，还能根据用户的电脑时间实时更新显示，为网页增添了一种...
HTML5 canvas超逼真的模拟时钟特效
10-08
总结一下，制作HTML5 canvas模拟时钟特效涉及到的关键知识点有： 1. HTML5 `<canvas>`元素的使用。 2. 获取2D渲染上下文`getContext('2d')`。 3. 使用`arc`, `strokeRect`, `fillRect`, `beginPath`, `rotate`, `...
canvas时钟 javascript
12-21
基于HTML5实现的时钟效果，利用canvas实现的时钟效果，代码清晰，可根据自己爱好修改样式，可供参考使用
【Canvas时钟】使用canvas制作简易时钟
qq_44871797的博客
12-15 399
使用canvas制作简易时钟 准备工作 创建一个画布 <style> * { padding: 0; margin: 0; } </style> <canvas id="clock" width="400" height="400"></canvas> <!-- 创建一个400*400大小的画布 --> 获取到画布及画布绘图环境 var clock = document.getElementById("clock");//获取到画布 v
用canvas制作一个时钟
jspyth的博客
10-20 2795
我想熟悉一下canvas的使用，参考一个例子做了一个能动态展示当前时刻的canvas时钟。 先看效果： 实现思路： 使用canvas绘图第一步肯定是先获取canvas元素对象，并定义上下文。 var clock = document.getElementById("clock"); clock.style.backgroundColor = "black"; var graph = n...
使用Canvas(画布）完成一个时钟
guitarist0505的博客
07-17 7897
Canvas最初由苹果推出，后来由W3C推广，目前几乎所有浏览器都支持Canvas。 canvas是一个闭合标签，包括宽度和高度属性。默认值为宽300，高150。浏览器不支持canvas时，canvas的文本会显示，通常用来检测浏览器兼容性。 &lt;canvas id="can" width="300" height="300"&gt;您的浏览器不支持canvas&lt;/canvas&g...
canvas---用canvas制作钟表
maidu_xbd的博客
05-14 1163
首先，看效果~~~绘制钟表如图 思路： （1）绘制一个60等分的圆，用一个半径稍小些的白色的圆覆盖画线区域，形成60分钟的刻度。 - （2）继续在以上基础上，绘制一个12等分的圆，用一个半径稍小些的白色的圆覆盖画线区域，形成12小时的刻度。 注意调整画线的宽度，以明显区分时针的刻度和分针的刻度。 (3)获取本地时间，并绘制时针，分针，秒针弧度。弧度=角度*Math.PI/180...
css制作炫酷的罗盘时钟特效（附代码）
z1093541823的博客
04-19 4106
炫酷的罗盘时钟特效； 可以直接使用；
纯JS制作一个网页时钟特效
Byte_Dance的博客
01-05 5227
  主要逻辑 根据JS 的Date属性 求得当前的 时 分 秒 之后,按照 360/(时|分|秒)  来对三个指针元素进行旋转 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title
Canvas 实现钟表
梓鸿
04-17 214
Canvas 实现钟表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Clock</title> </head> <bo...
js+画布canvas制作时钟特效
fangyuwuzhu的博客
04-03 755
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="c" width="500&
JS+H5 Canvas实现时钟效果
yytIcon的博客
07-18 442
用JavaScript+Canvas来实现最简单的时钟效果。 效果图： 先看html代码： &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/dem
Canvas制作烟花特效
05-11
下面是一个简单的Canvas烟花特效制作步骤： 1. 创建Canvas画布和一个数组，用来存储烟花粒子。 ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值