canvas-菜鸟版画布时钟

最新推荐文章于 2021-08-18 10:52:41 发布
最新推荐文章于 2021-08-18 10:52:41 发布
阅读量98 收藏
点赞数
原文链接：http://www.cnblogs.com/durenlong/p/7003081.html
版权

这是以前自己练习写的一个画布时钟

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　　　<style>
　　　　　　canvas{
　　　　　　margin: 20px 400px 0;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<canvas width="500px" height="500px"></canvas>

　　　　<script>
　　　　　　var can=document.getElementsByTagName("canvas")[0];
　　　　　　var x=can.getContext("2d");

　　　　　　function clock(){

　　　　　　　　//每次执行代码清楚一次画布
　　　　　　　　x.clearRect(0,0,500,500);

　　　　　　　　//画一个蓝色实心圆
　　　　　　　　x.beginPath();
　　　　　　　　x.fillStyle="blue";
　　　　　　　　x.arc(250,250,250,Math.PI*0/180,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();

　　　　　　　　//再来一个白色填充圆，半径小于上边的蓝色填充圆，这样就会出现一个蓝色的圆环
　　　　　　　　x.beginPath();
　　　　　　　　x.fillStyle="#ffffff";
　　　　　　　　x.arc(250,250,230,Math.PI*0/180,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();


　　　　　　　　//分钟刻度，通过循环画出60根分钟刻度，360/6 得出每个得间隔
　　　　　　　　for(var i=0;i<60;i++){
　　　　　　　　　　x.save(); //保存环境变量
　　　　　　　　　　x.beginPath();
　　　　　　　　　　x.lineWidth=2;
　　　　　　　　　　x.translate(250,250);
　　　　　　　　　　x.rotate(i*6*Math.PI/180); //每个刻度间隔是6° ，所以i*6 在进行旋转就画出了所有刻度
　　　　　　　　　　x.moveTo(0,220);
　　　　　　　　　　x.lineTo(0,230);
　　　　　　　　　　x.stroke();
　　　　　　　　　　x.closePath();
　　　　　　　　　　x.restore();  //返回环境变量
　　　　　　　　}

　　　　　　　　//时钟刻度，时钟刻度只有12个所以，360/12 每个之间的间隔是30°，原理和分钟刻度相同当然你还可以循环更多，比如刻度换为数字
　　　　　　　　for(var a=0;a<12;a++){
　　　　　　　　　　x.save();
　　　　　　　　　　x.beginPath();
　　　　　　　　　　x.lineWidth=4;
　　　　　　　　　　x.translate(250,250);
　　　　　　　　　　x.rotate(a*30*Math.PI/180);
　　　　　　　　　　x.moveTo(0,215);
　　　　　　　　　　x.lineTo(0,230);
　　　　　　　　　　x.stroke();
　　　　　　　　　　x.closePath();
　　　　　　　　　　x.restore();
　　　　　　　　}

 

　　　　　　　　//获取当前的本地时间，并分别获取，时，分，秒，时和分都要精确到小数点后

　　　　　　　　var time=new Date();
　　　　　　　　var seconds=time.getSeconds();
　　　　　　　　var minutes=time.getMinutes()+seconds/60;
　　　　　　　　var hours=time.getHours()+minutes/60;

　　　　　　　　//当大于12的时候也就是要进入13点了 也就是1点  所以要减去12
　　　　　　　　if(hours>12){
　　　　　　　　　　hours=hours-12
　　　　　　　　};

　　　　　　　　//表盘上显示本地时间，如2017/06/14 下午 20：23

　　　　　　　　x.beginPath()
　　　　　　　　x.font="20px 黑体"
　　　　　　　　x.strokeText(time.toLocaleString(),150,200)
　　　　　　　　x.closePath();

　　　　　　　　//时
　　　　　　　　x.save();
　　　　　　　　x.translate(250,250)
　　　　　　　　x.lineWidth=4;
　　　　　　　　x.beginPath();
　　　　　　　　x.rotate(hours*30*Math.PI/180);//画好时针后当前的小时*30就是应该旋转的°数。
　　　　　　　　x.moveTo(0,10);
　　　　　　　　x.lineTo(0,-180);
　　　　　　　　x.stroke();
　　　　　　　　x.closePath();
　　　　　　　　x.restore();

　　　　　　　　//分
　　　　　　　　x.save();
　　　　　　　　x.beginPath();
　　　　　　　　x.translate(250,250)
　　　　　　　　x.lineWidth=3;
　　　　　　　　x.rotate(minutes*6*Math.PI/180); //分针同理
　　　　　　　　x.moveTo(0,10);
　　　　　　　　x.lineTo(0,-200)
　　　　　　　　x.stroke();
　　　　　　　　x.closePath();
　　　　　　　　x.restore();

　　　　　　　　//秒
　　　　　　　　x.save();
　　　　　　　　x.beginPath();
　　　　　　　　x.translate(250,250);
　　　　　　　　x.lineWidth=2;
　　　　　　　　x.rotate(seconds*6*Math.PI/180);//秒针也一样
　　　　　　　　x.moveTo(0,10);
　　　　　　　　x.lineTo(0,-210);
　　　　　　　　x.stroke();
　　　　　　　　x.closePath();
　　　　　　　　x.restore();

　　　　　　　　//秒针上的小圆点

　　　　　　　　x.save();
　　　　　　　　x.beginPath();
　　　　　　　　x.translate(250,250);
　　　　　　　　x.rotate(seconds*6*Math.PI/180);//让秒针小圆点随秒针位置，其实和秒针相同
　　　　　　　　x.fillStyle="blue";
　　　　　　　　x.arc(0,-170,4,0,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();
　　　　　　　　x.restore();

                       //中心蓝色小圆点

　　　　　　　　x.beginPath();
　　　　　　　　x.fillStyle="blue"
　　　　　　　　x.arc(250,250,6,0,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();

　　　　　　　　//中心红色小圆点

　　　　　　　　x.beginPath();
　　　　　　　　x.fillStyle="red"
　　　　　　　　x.arc(250,250,3,0,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();

　　　　　　}
　　　　　　setInterval(clock,1000); //隔一秒运行一下这方法，先会清空掉画布然后重新画这样每秒时间都在动了。
　　</script>
</body>
</html>

 效果

 

　

转载于:https://www.cnblogs.com/durenlong/p/7003081.html

dibiedang8152
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Canvas绘制一个时钟
秃头小桂子
05-11 2239
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
canvas-clock:网络画布时钟
05-15
【canvas-clock:网络画布时钟】是一种使用HTML5 Canvas API创建的动态时钟应用。Canvas是HTML5的一个重要组成部分，它提供了一种在网页上绘制图形的方式，使得开发者能够创建丰富的、交互式的视觉效果。 JavaScript...
用canvas绘制时钟
ancha7106的博客
07-21 199
用canvas做时钟其实很简单，下面是我做出的效果： 是不是还挺漂亮的？ 下面上代码： html <div class="whole"> <canvas id="canvas" width="450" height="450"></canvas> <canvas id="canvas1" width="3...
Canvas之绘制时钟
summer爱前端
08-18 1327
用canvas画一个时钟玩玩吧，比css+js简单太多了……
canvas绘制时钟
hb707934728的博客
03-28 547
Clock body { background: #dddddd; } #canvas { position: absolute; left: 0px; top: 0px; margin: 20px;
Canvas-时钟
10-25
在这个“Canvas-时钟”项目中，我们将会深入探讨如何利用`<canvas>`元素来构建一个实时更新的数字或指针式时钟。 1. **Canvas 基础** - `<canvas>`元素在HTML5中被引入，主要用于在浏览器上动态生成图形。它是一个...
html5 canvas画布绘制圆形时钟代码
09-08
在这个“html5 canvas画布绘制圆形时钟代码”示例中，我们将深入探讨如何利用Canvas API来创建一个功能完备的圆形时钟。 首先，你需要在HTML文件中创建一个`<canvas>`元素，它将作为我们的画布。例如： ```html <!...
Canvas绘制微信小程序画布时钟
03-29
微信小程序官方组件也提供了画布功能，下面分享一下如何创建微信小程序画布时钟。 总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序，通过app.json公共设置来配置入口。 首先来看一下构建这样一个小程序所...
原生微信小程序源码 - -画布：时钟
最新发布
05-01
本项目"原生微信小程序源码 - 画布：时钟"就是一个很好的示例，展示了如何利用Canvas API来创建一个动态的时钟应用。 首先，我们来了解微信小程序中的Canvas组件。Canvas是HTML5引入的一个元素，也被微信小程序所...
HTML5 Canvas绘制时钟
06-01
NULL 博文链接：https://wenhai.iteye.com/blog/2158714
使用canvas制作一个动态时钟
05-02
使用canvas实现动态时钟效果
js+html5实现canvas绘制网页时钟的方法
11-23
本文实例讲述了js+html5实现canvas绘制网页时钟的方法，画的是一个可用于网页的、带摆的钟表，可以通过按钮调整其大小和位置，具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> [removed] var xClock=300; //表心位置 var yClock=250; //表心位置 var d=180.0;//钟表圆面的半径 var value = -d*1.07
HTML5：canvas制作时钟
02-22
每周定期有公开直播课，有业内大咖为你授业解惑，真实项目案例分享，从零到大神的成功之路，从你相信我开始!!!
使用canvas绘制时钟
一只前端小白的博客
03-10 343
理论基础： 掌握canvas绘制圆形，以及绘制扇形的弧度计算（涉及三角函数），掌握canvas的动画基础和绘制图片》了解更多 &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绘制一个时钟
sifanchao的博客
05-26 630
准备工作，设置基准 设置表钟的表心位置坐标（x,y）和表钟大小（r）。创建canvas，使用getContext() 方法返回canvas对象。 得到时分秒表针每走一步的度数，用来绘制扇形 初始化起始位置 时针因为一共12格，所以每走一步的度数为 30° 分针一共60格，所以一步为 6° 秒针6° 为了修饰，当秒针走了10秒时，分钟多一度；同理分针走了2分钟时，时针多一度。 绘制一个小刻度的扇形 绘制白色表盘 用白色表盘盖住上一个扇形圆，生成一个带有刻度的新扇形圆 绘制大刻度 绘制小白色表盘 绘
html：canvas画布绘图简单入门-绘制数字时钟
04-07
接下来，我们可以使用Canvas的API来绘制时钟的各个部分，包括外圆、小时刻度、分钟刻度、时针、分针和秒针。最后，我们可以使用JavaScript中的定时器来更新时钟的显示，使其每秒钟更新一次。希望这个简单的入门教程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值