canvas绘制时钟

最新推荐文章于 2021-11-04 11:33:02 发布
最新推荐文章于 2021-11-04 11:33:02 发布
阅读量102 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hello_zcx/article/details/81104360
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘制表盘</title>
</head>
<body>
<canvas id='box' width="500" height="500" >
    您的浏览器不支持canvas
</canvas>
<script>
    var box = document.getElementById('box');
    var ctx = box.getContext('2d');
    // 时钟动起来
    var timer = null;
    function clock(){
        var date = new Date();
        var h = date.getHours();
        h = h + h/60;
        h = h>12? h-12:h;
        var m = date.getMinutes();
        var s = date.getSeconds();
        // 清画布
        ctx.clearRect(0,0,500,500);
        // 画表盘
        ctx.strokeStyle = '#f0f';	//空心填充颜色
        ctx.lineWidth = 6;	//笔触宽度
        ctx.beginPath();
        ctx.arc(250,250,200,0,2*Math.PI,false);
        ctx.stroke();
	ctx.closePath();
        // 画时钟刻度(12个大格,每一个大格30度)
        for(var i=0; i<12; i++){
            ctx.save();
            ctx.translate(250,250);	//改变坐标系
            ctx.rotate(30*i*Math.PI/180);
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(0,-180);
            ctx.lineTo(0,-192);
            ctx.stroke();
            ctx.restore();
        }
        //画分钟刻度(60个小格,每一个小格6度) 
        for(var i=0; i<60; i++){
            ctx.save();
            ctx.translate(250,250);
            ctx.rotate(6*i*Math.PI/180);
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(0,-186);
            ctx.lineTo(0,-192);
            ctx.stroke();
            ctx.restore();
        }
        // 画时针
        ctx.save();
        ctx.lineWidth = 5;
        ctx.translate(250,250);
        ctx.rotate(h*30*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,6);
        ctx.lineTo(0,-80);
        ctx.stroke();
        ctx.restore();
        // 画分针
        ctx.save();
        ctx.lineWidth = 3;
        ctx.translate(250,250);
        ctx.rotate(m*6*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,8);
        ctx.lineTo(0,-100);
        ctx.stroke();
        ctx.restore();
        // 画秒针
        ctx.save();
        ctx.lineWidth = 1;
        ctx.translate(250,250);
        ctx.rotate(s*6*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,10);
        ctx.lineTo(0,-95);
        ctx.stroke();
        ctx.restore();
        // 画中心的小圆固定三根针
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = '#0f0';
        ctx.lineWidth = 2;
        ctx.translate(250,250);
        ctx.arc(0,0,2,0,360,false);
        ctx.stroke();
        ctx.fill();
        ctx.restore();
        // 画秒针上的园
        ctx.save();
        ctx.fillStyle = '#f00';
        ctx.lineWidth = 2;
        ctx.translate(250,250);
        ctx.rotate(s*6*Math.PI/180);
        ctx.beginPath();
        ctx.arc(0,-60,2,0,360,false);
        ctx.stroke();
        ctx.fill();
        ctx.restore();
    }
    clock();
    timer = setInterval(clock,1000);
</script>
</body>
</html>
0220w
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas学习（十六）：绘制时钟
总有一天，你的日积月累，会成为别人的望尘莫及
01-18 470
昨天在慕课网学着用canvas绘制时钟（去看看），避免以后忘记就在这里做个记录。 先上个效果图吧：这张图是静态的，实际上它是一个动态的时钟， 像平常看到的时钟一样，会一格一格走。   然后是需要掌握的数学知识： 知识点1：边与角的关系这个是直角三角形中边与角的关系，比较好理解。不多说。   知识点2：弧度与角度的关系  通过以上两个知识点计算(x,y)的坐标：那个角为什么是30度？...
canvas入门--绘制时钟
Crazykun的博客
02-09 690
canvas入门--绘制时钟
canvas学习（二）:绘制时钟
weixin_43909743的博客
08-27 409
需求 绘制一个简单时钟，要求 ：1、时分秒、表盘 2、随真实时间进行变化 结果图： 步骤 canvas基本对象 <canvas id="canvas1" width="800" height="600"> 你的浏览器不支持canvas </canvas> <script> // 1、找到画布对象 /** @type {HTMLCanvasElement} */ var canvas= document.getElementById('
Canvas 学习（时钟 绘图板）
雪急飞绪博客
05-23 194
canvas画圆 为什么需要用canvas，如果用onmousemove，每一次移动都会进行DOM重绘，非常消耗性能，这时我们需要看一下 canvas <div id="canvas"></div> <script> canvas.onmousemove = (e) => { let div = document.createElement("div"); div.style.position = "absolute";
Android绘制时钟
开心阳
01-19 7466
最近在学View相关的知识，对Canvas和Paint类有了初步了解，看到别人弄了一个会走动的时钟，自己也打算给弄上一个，算是巩固一下相关知识。 首先来分析一下，要绘制出一个时钟，要绘制哪几部分：时钟的大圆、圆上的刻度线、圆外的数字、圆中心处的圆点以及三个时钟指针。既然明白了要绘制的东西，下面只需要想办法来实现即可。 （1）绘制时钟的大圆 这个最简单，只要确定好圆
JavaScript Canvas绘制时钟
最新发布
02-22
接着，我们分别创建了`drawHourHand`、`drawMinuteHand`和`drawSecondHand`函数来绘制时钟的指针，这些函数会根据当前时间计算出对应的角度。`drawHand`是绘制指针的通用函数，它接受角度、长度、线宽和线帽样式作为...
JS+Canvas绘制时钟效果
10-22
总结来说，使用JavaScript和Canvas绘制时钟涉及的关键技术有：获取和设置Canvas上下文、时间的处理、坐标变换、路径绘制和线条样式控制。通过熟练掌握这些技术，你可以创建出各种复杂的图形和动画效果。
HTML5 Canvas绘制时钟
06-01
这篇博文“HTML5 Canvas绘制时钟”旨在介绍如何利用Canvas API创建一个实时更新的数字或指针式时钟。我们将深入探讨Canvas的基础知识、相关API以及实现时钟的具体步骤。 1. HTML5 Canvas基础 HTML5 Canvas是一个二...
canvas绘制表盘时钟
08-31
总的来说，使用Canvas API绘制表盘时钟是一个很好的实践项目，它展示了如何利用JavaScript和Canvas API实现动态、交互式的网页图形。这个过程涉及到数学（如角度计算）、时间和日期处理，以及图形绘制技巧，对提升...
canvas 绘制圆形时钟
08-31
为了绘制时钟的背景，我们定义了一个名为`drawBackground`的函数。这个函数会画出一个圆圈作为时钟的外框，标注小时数字，并绘制60个小圆点表示分钟刻度： ```javascript function drawBackground() { ctx.save();...
JavaScript html5 canvas绘制时钟效果
10-22
主要介绍了JavaScript html5绘制时钟效果的相关资料，使用HTML5的canvas标签和Javascript脚本，模拟显示了一个时钟，感兴趣的小伙伴们可以参考一下
javascript+HTML5 canvas绘制时钟功能示例
10-17
主要介绍了javascript+HTML5 canvas绘制时钟功能,结合实例形式分析了javascript+HTML5 canvas数值运算、图形绘制与时间显示相关操作技巧,需要的朋友可以参考下
使用canvas绘制超炫时钟
09-28
接下来，我们开始绘制时钟。时钟分为以下几个部分： 1. **表盘**：使用径向渐变填充，创建12个扇形段，模拟钟面的刻度。首先保存当前的绘图状态，然后进行坐标转换，将原点移动到画布中心。计算每个刻度的角度（deg...
JavaScript html5 canvas绘制时钟效果(二)
10-22
主要介绍了JavaScript html5绘制时钟效果的相关资料，使用HTML5的canvas标签和Javascript脚本，模拟显示了一个时钟，感兴趣的小伙伴们可以参考一下
canvas时钟绘制方法总结
monparadis的博客
11-04 764
1.首先需要一个画布，因为要画时钟肯定需要计算角度，Math.PI*degree/180，所以将Math.PI存起来 2.绘制表盘，表盘是由60个刻度线构成，时间整点刻度是5的倍数，用着个特点来算刻度线的颜色和宽度 3.绘制时钟一定要知道时间，然后计算时分秒角度 4.绘制时分秒 5.指针时刻在走动，每次绘制记得把画布清空，上面绘制表盘里面使用了清空方法 注意点：每次的状态记得保存，每一帧画完记得清空 绘制完一帧记得使用closePath的方法...
Canvas 画时钟
destiny'Note
11-30 5872
前言不管学习什么，不动手去做，永远不能熟练掌握。学习了 canvas API，会觉得只要按照直线、圆等画法去画，canvas 太简单了。可是，当你真正去画的时候，会遇到许多的问题。下面介绍的是 canvas 时钟，主要是与大家分享我的学习过程。 不懂 canvas 的同学，请先学习：Canvas 画布 一、相关几何知识钟面是一个圆，主要包含每个小时数字、以及刻度，它们的位置坐标应该如何计
PS实现时钟绘制
weixin_43412068的博客
10-20 2964
摘取在时钟实现过程中需要注意的点，整理记录： 最终效果展示： 步骤1：时钟基本构架绘制 结果展示： 首先分析时钟基础组成，icon底盘，时钟底盘外圈，时钟内圈，时钟时针、分针、秒针、定时针，黑圆、黄圆。 秒针和定时针在绘制时需要进行形状调节。使用圆角矩形工具，绘制好秒针使用的圆角矩形后，选择直接选择工具，拖动锚点，即可调节圆角矩形形状，成功get秒针和定时针。 时针和分针上的黄色形状，为了效果...
html5 画布绘制时钟
qq_37149421的博客
03-06 4613
用Html5实现时钟，包括转盘时钟和电子时钟，显示当前日期时间绘制步骤：（1）先获取画布，设置画布的大小；（2）在js中获取画布对象，获取画布的画笔对象，设置画笔的一些属性；（3）获取系统当前时间，转换成时分秒，用变量保存下来；（4）先画分钟刻度线，每6°画一条线，共60条刻度线（循环）；（5）画时钟刻度线，每30°画一条线，相对分针长一点粗一点，共12条线（6）画时针、分针和秒针，时针最短最粗，...
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <title>Canvas时钟 canvas { border: 2px solid black; } <canvas id="clock" width="200" height="200"></canvas> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值