canvas标签结合javascript做出动态时钟效果

最新推荐文章于 2021-06-09 22:01:50 发布
最新推荐文章于 2021-06-09 22:01:50 发布
阅读量440 收藏
点赞数
分类专栏： html5&&css3 文章标签： canvas javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011263845/article/details/44981441
版权

代码如下:

<!doctype html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background: purple;
}
</style>
</head>
<body>
<canvas id="liuzhe" width="500" height="500"></canvas>
<script type="text/javascript">
var clock=document.getElementById("liuzhe");
var cxt=clock.getContext("2d");
    function drawclock(){
    //清除画布
    cxt.clearRect(0,0,500,500)
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
hour=hour>12?hour-12:hour;




//画圆
cxt.lineWidth=10;
cxt.strokeStyle="red";
cxt.beginPath();
cxt.arc(250, 250, 200, 0, 360, false);
cxt.closePath();
cxt.stroke();


//小时
for(var i=0;i<12;i++){
cxt.save();
cxt.lineWidth=7;
cxt.strokeStyle="#000";
cxt.translate(250, 250);
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0, -170);
cxt.lineTo(0, -190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//分钟
for(var i=0;i<60;i++){
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="#000"
cxt.translate(250, 250);
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
        cxt.moveTo(0, -180);
        cxt.lineTo(0, -190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
    


//时针
    cxt.save();
    cxt.lineWidth=7;
    cxt.strokeStyle="#000";
    cxt.translate(250, 250);
    cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0, -140);
cxt.lineTo(0, 10);
cxt.closePath();
cxt.stroke();
    cxt.restore();


//分针
    cxt.save();
    cxt.lineWidth=5;
    cxt.strokeStyle="#000";
    cxt.translate(250, 250);
    cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0, -160);
cxt.lineTo(0, 15);
cxt.closePath();
cxt.stroke();
    cxt.restore();


    //秒针
    cxt.save();
    cxt.lineWidth=3;
    cxt.strokeStyle="red";
    cxt.translate(250, 250);
    cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0, -170);
cxt.lineTo(0, 20);
cxt.closePath();
cxt.stroke();
    cxt.restore();    
}






    //周期循环时间
    setInterval(drawclock, 1000);
</script>
</body>

u011263845
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用canvas.save()、canvas.restore()、canvas.translate()、canvas.rotate()绘制一个时钟表盘
一个写代码的胖子的博客
04-26 4289
Android绘制坐标系，原点在屏幕左上角，向右为x轴正方向，向下为y轴正方向。canvas.save(); 这个方法作用是将已经绘制的图像保存起来，让后续的操作就好像在一个新图层上操作一样。 canvas.restore(); 这个方法可以理解为合并图层的操作，作用是将save之后绘制的图像和save之前的图像进行合并。canvas.translate(); 这个方法理解成为坐标系的平移与翻转更加
javascript结合canvas标签做出来的时钟效果
Tz。
04-10 551
代码如下： body{ background: purple; } var clock=document.getElementById("liuzhe"); var cxt=clock.getContext("2d");     function drawclock(){     //清除画布     cxt.clearRect(0,0,500,
html5设置动画时钟,html5绘制时钟动画
weixin_31857829的博客
06-09 94
复制代码代码如下:var clock=document.getElementById("clock");var cxt=clock.getContext("2d");function drawNow(){var now=new Date();var hour=now.getHours();var min=now.getMinutes();var sec=now.getSeconds();hour=...
HTML5&nbsp；绘制时钟
寒冰的暖
03-01 535
效果图： 绘制时钟" TITLE="HTML5绘制时钟" /> 测试内容 var demo=document.getElementByIdx_x_x("demo"); var cxt=demo.getContext('2d'); function drawclock(){ cxt.clearRect(0,0,500,500); var now=new Date(); var s
绘制风景时钟
aaa小二
05-22 898
canvas 时钟 drawImage fillText strokeText setInterval
JavaScript html5 canvas绘制时钟效果
10-22
主要介绍了JavaScript html5绘制时钟效果的相关资料，使用HTML5的canvas标签和Javascript脚本，模拟显示了一个时钟，感兴趣的小伙伴们可以参考一下
JavaScript Canvas绘制时钟
最新发布
02-22
这个JavaScript Canvas时钟实例展示了如何利用Canvas API进行动态图形绘制。你可以根据需要调整颜色、大小或添加更多细节，如数字刻度或时钟背景，以实现自定义的时钟效果。通过深入理解Canvas的绘图方法，你可以...
JavaScript html5 canvas绘制时钟效果(二)
10-22
主要介绍了JavaScript html5绘制时钟效果的相关资料，使用HTML5的canvas标签和Javascript脚本，模拟显示了一个时钟，感兴趣的小伙伴们可以参考一下
javascript canvas封装动态时钟
01-18
本文实例为大家分享了canvas封装动态时钟的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=...
JavaScript canvas动画实现时钟效果
10-15
主要为大家详细介绍了JavaScript canvas动画实现时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript结合Canvas 实现简易的圆形时钟
10-24
本文给大家分享的是javascript结合Canvas 实现简易的圆形时钟，主要是对自己前段时间学习html5的canvas的一次小检验，这里推荐给小伙伴们，有需要的可以参考下。
JS+Canvas绘制动态时钟效果
10-19
在本文中，我们将深入探讨如何使用JavaScript和HTML5的Canvas API来创建一个动态时钟效果。Canvas是一个非常强大的工具，允许开发者在网页上绘制复杂的图形和动画。让我们一起解析给出的代码片段，了解如何实现这个...
JavaScript Canvas绘制圆形时钟效果
10-20
主要为大家详细介绍了JavaScript Canvas绘制圆形时钟效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
canvas时钟效果
08-31
总结来说，这个canvas时钟效果是通过JavaScript和HTML5的Canvas API实现的，它结合了时间更新、数字绘制、动画原理以及可能的用户交互，展示了Canvas在动态网页设计中的强大能力。为了完全实现这个时钟，你需要补充...
canvas时钟 javascript
12-21
在这个“canvas时钟 javascript”项目中，我们看到了如何结合canvas和JavaScript来创建一个实时更新的时钟效果。接下来，我们将深入探讨这个知识点。 首先，canvas是一个二维绘图上下文，通过JavaScript的API可以...
html5时间同步系统,HTML5 canvas 实现同步时钟
weixin_31560425的博客
06-08 404
都说HTML5和CSS3将会是前端工作者要学习和掌握的必要技术。不错，随着各大主流浏览器之间的“互坑”性兼容问题原来越少。作为前端开发人员，趁早提前熟悉掌握此两种必要知识是很有必要的！嘎嘎。在此，小码哥讲给大家分享一下用HTML5中的canvas画布制作的同步时钟。(透露一下，此种代码并非小码哥亲自编写，知识俺将每一步解析了一下，，供大家参考哈，，惭愧，俺也在进步学习中呢！！)因此，说是原创，只是...
玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
04-29 8828
先给个效果图，我画的比较丑，大家可以自己美化一下， 直接上代码： 您的浏览器不支持canvas //获取画布 var clock=document.getElementById('clock'); //设置绘图环境
通过html5 canvas绘制时钟
青菜馒头web前段
10-12 814
原文地址：http://xfenglin.com/a/12007204175.html?ref=myread最近一直在学习html5，学到了html5的canvas标签，这个画布真的是很强大，它有对应的javascript的api的支持，你可以在这个标签里面绘制任意的图形，你也可以把图片放在里面，能够做出很炫的效果。言归正传，废话不多说，首先，html，只一句设置画布的id，宽度和高度<canvas
HTML5 时钟
wuyunhao 博客
05-23 1311
这几天写HTML5作业，做网页做恶心了闲暇时间做了个时钟玩玩，代码需要的可以自取，不能说有多么精妙，但只有不断进步才是最好。&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt;&lt;/head&gt;&lt;body&gt; &lt;canvas id="canvas"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值