用H5新特性canvas绘制一个钟表

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量128 收藏 1
点赞数 2
分类专栏： canvas标签的练习以及js代码的应用 文章标签： javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/you_very_brave/article/details/117049243
版权

由canvas中的beginPath(),stroke()来绘制钟表的指针和点数
在然后用一个函数封装，用间歇调用setInterval(handler,1000)来让函数每一秒绘制一个表，到达动态的效果
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用canvas绘制钟表</title>
    <style>
    #cv{
        border: 1px solid #333;
    }
    </style>
    <script>
    window.onload=function(){
        var cv=document.getElementById("cv");
        var ctx=cv.getContext("2d");
        setInterval(toDrawClock,1000)
        
      
        function toDrawClock(){
            var x=200;
            var y=200;
            var r=150;
            ctx.clearRect(0,0,cv.width,cv.height);
            
            // 获取本地时间
            var oDate=new Date();
            var oHours=oDate.getHours();
            var oMinutes=oDate.getMinutes();
            var oSeconds=oDate.getSeconds();
 
            // 计算当前时间对应的弧度
            var oHoursValue=(-90+oHours*30+oMinutes/2)*Math.PI/180;
            var oMinutesValue=(-90+oMinutes*6+oSeconds/10)*Math.PI/180;
            var oSecondsValue=(-90+oSeconds*6)*Math.PI/180;
 
            // 分针刻度，每6度一分钟
            ctx.beginPath();
            for(var i=0;i<60;i++){
                ctx.moveTo(x, y);
                ctx.arc(x, y, r, 6*i* Math.PI / 180, 6*(i+1) * Math.PI / 180);
            }
            ctx.closePath();
            ctx.stroke();
 
            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.arc(x, y, 19/20*r,0, 360 * Math.PI / 180);
            ctx.closePath();
            ctx.fill();
 
            // 时针刻度，每30度一小时
            ctx.beginPath();
            ctx.lineWidth=3;
            for(var i=0;i<12;i++){
                ctx.moveTo(x, y);
                ctx.arc(x, y, r, 30*i* Math.PI / 180, 30*(i+1) * Math.PI / 180);
            }
            ctx.closePath();
            ctx.stroke(); 
 
            ctx.fillStyle = "white"; 
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.arc(x, y, 18/20*r,0, 360 * Math.PI / 180);
            ctx.closePath();
            ctx.fill();
 
            // 绘制时针
            ctx.beginPath();
            ctx.lineWidth=6;
            ctx.moveTo(x, y);
            ctx.arc(x, y, 12/20*r,oHoursValue,oHoursValue);
            ctx.closePath();
            ctx.stroke();
            // 绘制分针
            ctx.beginPath();
            ctx.lineWidth=4;
            ctx.moveTo(x, y);
            ctx.arc(x, y, 16/20*r,oMinutesValue, oMinutesValue);
            ctx.closePath();
            ctx.stroke();
            // 绘制秒针
            ctx.beginPath();
            ctx.lineWidth=2;
            ctx.moveTo(x, y);
            ctx.arc(x, y, 18/20*r,oSecondsValue, oSecondsValue);
            ctx.closePath();
            ctx.stroke();
            // ctx.font = '5px 宋体';
            // ctx.fillText('12',200,80)
        }
        
 
    }
    </script>
</head>
<body>
  <div style="text-align: center;">
    <canvas id="cv" width="400px" height="400px">
      不支持的浏览器
    </canvas>
  </div>
    
</body>
</html>
a浮云
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
h5画布实现钟表
一李
03-15 304
关于 save和restore要通过栈结构来控制路径， 每次重新画一个图形的时候要调用beginPath清空整个路径容器 使用canvas实现动画效果经常需要使用到定时器以及for循环的配合 canvas画布只有getContext 和width height 大部分性质都是和画笔相关的 通过moveto等属性计算好原点的位置，方便随时对画中的属性进行计算。 计算好原点的距离 ...
利用H5的canvas画一个时钟
m0_57923701的博客
12-25 997
用canvas画一个钟表
H5 canvas 制作简易时钟
id_no_chinese的博客
07-10 1207
学习了canvas，写下自己的心得体会。1.在css中设置canvas的宽和高，发现里面的矩形和其他元素都是放大的。然后自己得出结论：1.canvas的宽高属性要写在 标签内canvas的默认宽高为300*150，如果宽高设置相对默认值的x倍，你所画的元素也会相对你设置的扩大x倍。亲自实验发现真是这样。但是这样画布中的元素宽高就不好控制了。第二天发现把 宽高以属性值的方式写到标签中时，元素和你设置...
如何使用h5元素“Canvas”来绘制一个简易的网页时钟（附代码）
weixin_75115821的博客
07-26 746
Canvas是HTML5中的一个元素，用于通过JavaScript和HTML绘制图形、动画和交互式内容。它可以在浏览器中创建和操作位图图像，使开发者可以在网页上实现高度个性化的视觉效果和交互体验。通过Canvas，开发者可以使用JavaScript来绘制图形、文本和图像。可以动态地更新画布上的内容，实现动画效果或响应用户的交互操作。Canvas提供了一组丰富的绘图函数和方法，使开发者可以在画布上绘制直线、矩形、圆形、路径等形状，并可以使用各种样式、颜色和渐变来装饰绘制的图形。
h5 canvas绘制电子数字时钟
henly1217的专栏
01-12 463
使用h5的canvas绘制电子数字时钟
利用H5中canvas画布绘制一个时钟(动态)
weixin_30478619的博客
12-12 254
注意：Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。Internet Explorer 8 以及更早的版本不支持 <canvas> 元素 效果图如下： 实现代码：（代码中有相应注释介绍，比较好懂，如果实在有不懂得地方，欢迎私信，或者参考W3C文档） 1 &...
HTML画正方形钟表,html5 canvas绘制时钟表时间
weixin_39637545的博客
06-02 279
特效描述：html5 canvas绘制 时钟表时间。用canvas精灵绘制器绘制的时钟代码结构1. 引入JS2. HTML代码var Sprite=function(name,painter,behaviors){if(name!==undefined) this.name=name;if(painter!==undefined) this.painter=painter;this.top=0;t...
H5--Canvas使用以及API
coding...
05-07 1367
Canvas前端绘图工具，Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。返回的CanvasGradient对象的addColorStop(offset, color)添加渐变颜色。canvas 搭配video。
使用canvas绘制钟表
11-06
本教程将详细介绍如何使用canvas绘制一个动态的钟表，这涉及到JavaScript和Canvas API的基础知识。 首先，我们需要在HTML页面中创建一个canvas元素，并设置其id以便在JavaScript中引用： ```html <canvas id=...
用H5新特性做的一个可爱的动态注册界面
11-06
4. **Canvas**：这是一个可编程的2D绘图区域，可以通过JavaScript进行动态绘制。在注册过程中，可能利用Canvas创建动态的动画效果，增加视觉吸引力。 5. **Web Storage**：包括`localStorage`和`sessionStorage`，...
canvas绘制一个常用的emoji表情
08-30
在本文中，我们将深入探讨如何使用HTML5的Canvas API来绘制一个常见的emoji表情。Canvas是一个强大的Web技术，它允许开发者在网页上动态绘制图形。通过JavaScript控制，我们可以创建各种复杂的图像，包括表情符号。 ...
html5新特性canvas绘制弹幕
10-14
在这个“html5新特性canvas绘制弹幕”的项目中，开发者利用Canvas和JavaScript技术实现了一个弹幕展示的功能，这通常在视频网站或直播平台中常见，如B站(bilibili)。 首先，Canvas是一个基于矢量图形的画布，通过...
canvas如何绘制钟表的方法
09-27
本篇文章将深入探讨如何使用Canvas绘制一个钟表，包括小时、分钟和秒针的动态显示。首先，我们需要了解Canvas的基本用法，以及如何利用JavaScript来控制其绘图操作。 1. 获取Canvas元素： 在HTML中创建一个Canvas...
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1318
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 219
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 280
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 1036
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
JS混淆基本类型和原理
朴拙科技的博客
07-06 404
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
使用canvas绘制一个球
04-03
以下是使用canvas绘制一个球的示例代码： ```html <!DOCTYPE html> <title>Canvas Ball canvas { border: 1px solid black; } <canvas id="myCanvas" width="200" height="200"></canvas> const...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值