绘制走动的时钟

最新推荐文章于 2022-09-09 12:03:49 发布
最新推荐文章于 2022-09-09 12:03:49 发布
阅读量1.1k 收藏 1
点赞数
文章标签： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itscassie_/article/details/82763892
版权

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                padding: 0;
                margin: 0;
                background-color: rgba(0, 0, 0, 0.1)
            }
            
            canvas {
                display: block;
                margin: 200px auto;
            }
        </style>
    </head>

    <body>
        <canvas id="solar" width="300" height="300"></canvas>
        <script>
            init();

            function init() {
                let canvas = document.querySelector("#solar");
                let ctx = canvas.getContext("2d");
                draw(ctx);
            }

            function draw(ctx) {
                requestAnimationFrame(function step() {
                    drawDial(ctx); //绘制表盘
                    drawAllHands(ctx); //绘制时分秒针
                    requestAnimationFrame(step);
                });
            }
            /*绘制时分秒针*/
            function drawAllHands(ctx) {
                let time = new Date();

                let s = time.getSeconds();
                let m = time.getMinutes();
                let h = time.getHours();

                let pi = Math.PI;
                let secondAngle = pi / 180 * 6 * s; //计算出来s针的弧度
                let minuteAngle = pi / 180 * 6 * m + secondAngle / 60; //计算出来分针的弧度
                let hourAngle = pi / 180 * 30 * h + minuteAngle / 12; //计算出来时针的弧度

                drawHand(hourAngle, 60, 6, "red", ctx); //绘制时针
                drawHand(minuteAngle, 106, 4, "green", ctx); //绘制分针
                drawHand(secondAngle, 129, 2, "blue", ctx); //绘制秒针
            }
            /*绘制时针、或分针、或秒针
             * 参数1：要绘制的针的角度
             * 参数2：要绘制的针的长度
             * 参数3：要绘制的针的宽度
             * 参数4：要绘制的针的颜色
             * 参数4：ctx
             * */
            function drawHand(angle, len, width, color, ctx) {
                ctx.save();
                ctx.translate(150, 150); //把坐标轴的远点平移到原来的中心
                ctx.rotate(-Math.PI / 2 + angle); //旋转坐标轴。 x轴就是针的角度
                ctx.beginPath();
                ctx.moveTo(-4, 0);
                ctx.lineTo(len, 0); // 沿着x轴绘制针
                ctx.lineWidth = width;
                ctx.strokeStyle = color;
                ctx.lineCap = "round";
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
            }

            /*绘制表盘*/
            function drawDial(ctx) {
                let pi = Math.PI;

                ctx.clearRect(0, 0, 300, 300); //清除所有内容
                ctx.save();

                ctx.translate(150, 150); //一定坐标原点到原来的中心
                ctx.beginPath();
                ctx.arc(0, 0, 148, 0, 2 * pi); //绘制圆周
                ctx.stroke();
                ctx.closePath();

                for(let i = 0; i < 60; i++) { //绘制刻度。
                    ctx.save();
                    ctx.rotate(-pi / 2 + i * pi / 30); //旋转坐标轴。坐标轴x的正方形从 向上开始算起
                    ctx.beginPath();
                    ctx.moveTo(110, 0);
                    ctx.lineTo(140, 0);
                    ctx.lineWidth = i % 5 ? 2 : 4;
                    ctx.strokeStyle = i % 5 ? "blue" : "red";
                    ctx.stroke();
                    ctx.closePath();
                    ctx.restore();
                }
                ctx.restore();
            }
        </script>
    </body>

</html>

itscassie_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas画时钟
pumpkin_truck的博客
06-04 2498
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
OpenGL实验二：绘制钟表.zip
05-14
纯C语言写的OpenGL绘制钟表代码，编译器VS2010，钟表调用系统时间，表盘大小、刻度大小等可调，注释详尽，命名易懂
【计算机图形学】OpenGL电子时钟制作
weixin_43851971的博客
08-10 1772
OpenGL电子时钟制作
c语言 opengl画仪表盘源码,OpenGL学习——绘制矩形
weixin_28925169的博客
05-22 581
#include "Rectangles.h"Rectangles::Rectangles(){}Rectangles::~Rectangles(){}voidRectangles::init(){//x,y,z opengl coordinates, the vertex data, three 3d point in normalized device coordinatesGLfloat ...
Python canvas：简易圆盘时钟，圆盘
射手座轩木酱的代码天地~
07-12 8380
时钟？用Python？你可能会说，实在是太简单了吧，谁不会？>>> 不，今天，我们要做的是圆盘时钟！使用pip下载所需模块： 一、导入模块 导入我们所需的模块： 二、定义指针 这里可以算是最核心、最难理解的部分了，使用一堆数学运算，定义出时钟的圆盘、刻度、数字和指针。（注：需要有对三角函数的深刻理解~） 三、生成窗口与初始化 生成tkinter窗口，并导入函数。 四、指针动态显示 通过简单的循环，实现对指针的动态显示。 解释一下，以下部分是在时钟下方显示了数字时间：
会走动的图形html5时钟示例
09-28
`tik`方法首先清除画布，然后调用`rePaint()`方法更新并绘制时钟，最后使用`setInterval`创建一个定时器，每秒执行一次`tik`，确保时钟实时更新。 总的来说，这个HTML5时钟示例展示了如何利用Canvas API结合...
C# GDI绘制的动态时钟
04-27
一个利用坐标旋转原理计算坐标，绘制时钟的时针，分针，秒针，动态实现钟表显示的GDI绘图程序。
使用CGContext绘制时钟应用案例
04-01
该源码实现一款非常使用CGContext绘制时钟应用案例，可以使时钟、分钟和秒钟都可以根据当前时间来走动的效果，非常适合新手的使用，是一个不错的ios学习的例子，喜欢的朋友可以下载学习看看，。
canvas学习（十六）：绘制时钟
05-03
NULL 博文链接：https://1017401036.iteye.com/blog/2407866
css3 利用transform打造走动的2D时钟
01-18
1、利用定位完成时钟的绘制。 2、背景使用了放射性渐变。 3、利用JavaScript完成刻度和时间数字的旋转。 4、利用Date()对象获取系统时间，并让时针指向对应的刻度。 5、利用定时器不断更新时间，完成时针的运动。 一...
用CAD画的时钟很逼真不容错过
10-31
jkhzjkhaskjhaksljhfkaskfsajhdkfjhkjhfkjah
HTML5 Canvas绘制时钟
06-01
NULL 博文链接：https://wenhai.iteye.com/blog/2158714
cad二次开发之模拟时钟
08-24
上述文件是一个简易CAD二次开发应用，原理很简单：仅仅是一条直线每次旋转一个角度，一直循环罢了，
opengl_飞机虚拟仪表盘界面程序_c++代码
03-09
一个使用c++编写的，基于opengl的一个简单的飞机虚拟仪表盘界面程序。仿照波音747做的。仅供学习参考。
html5绘制会动的时钟,HTML5的绝活:巧用Canvas制作会动的时钟
weixin_42572134的博客
07-02 211
[javascript] view plaincopy$(function() {var canvas=document.getElementById("mycanvas");var context=canvas.getContext("2d");context.strokeStyle="rgb(255, 0, 0)";context.lineWidth=10;context.shadowColo...
用canvas制作一个时钟
jspyth的博客
10-20 2790
我想熟悉一下canvas的使用，参考一个例子做了一个能动态展示当前时刻的canvas时钟。 先看效果： 实现思路： 使用canvas绘图第一步肯定是先获取canvas元素对象，并定义上下文。 var clock = document.getElementById("clock"); clock.style.backgroundColor = "black"; var graph = n...
使用canvas绘制时钟
NanChen的博客
09-09 458
是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。使用clip()函数将该区域（由rect()、arc()方法指定的绘图区域）设定为裁选区。使用Canvas的绘制函数比如，rect()、arc()之类的方法选择好绘图区域。
前端（canvas）圆形网页时钟实现，源码
Altaba的博客
01-22 2096
欢迎来到Altaba的博客 2017年1月23日 canvas画出图案，网页时钟，不废话，源码奉上，望借鉴者多点思考，前端乐趣无穷 <!--<%-- Document : 时钟 Created on : 2016-5-19, 9:49:29 Author : Administrator --%> --> JSP Page时针 canvas {
canvas绘制时钟
qq_40710974的博客
09-29 973
大部分的内容都是参考这里的,但是我做了改动并且讲的会更细一点 https://mp.weixin.qq.com/s/qhPg2TjjcFh9l5ZLUsFPSg
matlab绘制动态时钟
最新发布
03-31
% 循环绘制时钟 while true % 获取当前时间 current_time = clock; % 计算指针的角度 hour_angle = (current_time(4) / 12) * 360; minute_angle = (current_time(5) / 60) * 360; second_angle = (current_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值