canvas画布带时间的钟表

最新推荐文章于 2023-05-15 22:17:25 发布
最新推荐文章于 2023-05-15 22:17:25 发布
阅读量375 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41839784/article/details/89952215
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <canvas id="sb" width="1000px" height="800px" style="border:1px solid black"></canvas>
</body>
    <script type="text/javascript">
        var s = sb.getContext("2d");
        
        function shijian(){
            var arr = [6,7,8,9,10,11,12,1,2,3,4,5];
            s.clearRect(0,0,1000,800);
            s.beginPath();
        s.lineWidth = "10";
        s.arc(400,400,300,0,360,false);
        s.stroke();
        s.closePath();

        s.save();
        s.beginPath();
        s.font = "20px 微软雅黑";
        s.textAlign = "center";
        s.textBaseline = "middle";
        s.fillStyle = "black";
        s.fill();
        s.fillText("BeiJing",400,200);
        s.closePath();
        s.restore();

        //画出一个圆心
        s.save();
        s.translate(400, 400);
        s.beginPath();
        s.arc(0,0,1,0,Math.PI * 2,false);
        s.fillStyle = "#000";
        s.fill();
        s.stroke();
        s.closePath();
        s.restore();
        //小时刻度
        for(var i = 0 ; i < 12 ; i++){
            s.save();
            s.translate(400, 400);
            s.rotate(Math.PI/180 * 30 * i);
            s.beginPath();
            s.moveTo(0,-300);
            s.lineTo(0,-280);
            s.lineWidth = "7";
            s.stroke();
            s.closePath();
            s.restore();
        }

            //画小时数
        var hour = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
        
        for(var i = 0 ; i < 12 ; i++){
            s.beginPath();
            //12个时针刻度
            var rad = 2 * Math.PI / 12 * i;
            //获得此弧度的横纵坐标
            1.以3点为起点，顺时针方向
            横坐标 = 圆的横坐标 + Math.cos(弧度) * 半径
            纵坐标 = 圆的纵坐标 + Math.sin(弧度) * 半径
            2.以6点为起点，逆时针方向
            横坐标 = 圆的横坐标 + Math.sin(弧度) * 半径
            纵坐标 = 圆的纵坐标 + Math.cos(弧度) * 半径
            var x = Math.cos(rad) * 270;
            var y = Math.sin(rad) * 270;
            console.log(x,y);
            s.font = "18px sans-serif"
            s.textAlign = "center";
            s.textBaseline = "middle";
            s.fillStyle='red';
            s.fill();
            s.fillText(hour[i], x+400, y+400);
            s.closePath();
        }

        //分刻度
        for(var i = 0 ; i < 60 ; i++){
            s.save();
            s.translate(400, 400);
            s.rotate(Math.PI /180 * 6 * i);
            s.beginPath();
            s.moveTo(0,-300);
            s.lineTo(0, -290);
            s.lineWidth = "5";
            s.stroke();
            s.closePath();
            s.restore();
        }

        var time = new Date();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        hours = hours > 12 ? hours -12 + (minutes / 60) : hours +(minutes / 60);
        //画秒针
        s.save();
        s.translate(400,400);
        s.rotate(Math.PI / 30 * seconds);
        s.beginPath();
        s.moveTo(0,15);
        s.lineTo(0,-150);
        s.strokeStyle = "red";
        s.lineWidth = "3";
        s.stroke();
        s.closePath();
        s.restore();


        //画分针
        s.save();
        s.translate(400,400);
        s.rotate(Math.PI / 30 * minutes);
        s.beginPath();
        s.moveTo(0,15);
        s.lineTo(0,-80);
        s.strokeStyle = "blue";
        s.lineWidth = "4";
        s.stroke();
        s.closePath();
        s.restore();

        //画时针
        s.save();
        s.translate(400,400);
        s.rotate(Math.PI / 6 * hours);
        s.beginPath();
        s.moveTo(0,15);
        s.lineTo(0,-60);
        s.strokeStyle = "orange";
        s.lineWidth = "5";
        s.stroke();
        s.closePath();
        s.restore();
        }
        shijian()
        setInterval(shijian, 1000)


        
    </script>
</html>

 

qq_41839784
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas 画布画太极图和钟表
qq_36801966的博客
07-03 659
画图形&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;绘制图形&lt;/tit
canvas实现钟表效果
08-31
在钟表的例子中，我们主要利用了Canvas的绘图方法和时间处理来实现动态的时针、分针和秒针。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，用于展示我们的钟表。在这个例子中，`<canvas>`元素的id为"canvas1...
使用html做张时间表格,Html5 canvas画布制作时间钟表
weixin_35816287的博客
06-05 286
function aa() {var oCvs=document.getElementById('cvs');// 创建画布2d环境var Cvs=oCvs.getContext('2d');function clock(){// 获取实时的时间的时分秒var nData=new Date();var iS=nData.getSeconds();var iM=n...
html5 canvas画布实现钟表
JS 实现全选和反选
05-08 639
html5 canvas画布实现钟表 实现思路： 先创建画布，在画布中创建一个圆，然后创建出 时钟刻度和分钟刻度，以及时间，时针、分针、秒针所在的位置，用时间函数封装。 第一步：创建画布并创建圆 <body> <canvas id="myCanvas" width="400" height="400"></canvas> </body> &...
用画布canvas简单画时钟表
qq_42822993的博客
09-14 234
用画布canvas画时钟表 一、效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
html网页作品欣赏关于时光,Html5 canvas画布制作时间钟表
weixin_39958248的博客
05-31 108
HtmlCssJsbody {background:#ccc;}* {margin:0;padding:0;}#cvs {background:#fff;border:1px solid darkblue;}function aa() {var oCvs=document.getElementById('cvs');// 创建画布2d环境var Cvs=oCvs.getContext('2d');...
HTML5，Canvas画布
h360583690的博客
08-16 1077
目录 前言 一、Canvas的基本用法 二、绘制图像 1.绘制线段 2.绘制三角形 3.绘制矩形 4.绘制圆形 5.绘制椭圆 6.绘制渐变效果 7.绘制文本 8.绘制贝济埃曲线 9.其他 总结 前言 canvas是H5中最受欢迎的功能，这个元素负责在页面中设定一个区域，然后就可以通过JS动态地在这个区域中绘制图形，甚至可以制作简单的动画。canvas元素最早由苹果公司推出，当时主要用在Dashboard微件中，很快H5加入了这个元素，主要浏览器也迅速开...
H5 Canvas画布基础 一
qq_44755394的博客
03-10 555
H5 画布基础H5 Canvas画布基础知识笔记基本用法矩形绘制路径绘制Save & Restorecanvas 签名画板canvas 曲线canvas 变换canvas-实例1（变换） ：钟表图片 H5 Canvas画布基础知识笔记      画布元素可被用来通过JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。      本文为H5 画布学习笔记。 基本用法 canvas 需
Canvas实现简单时钟表盘
qq_31808873的博客
05-15 522
Canvas绘制表盘
Canvas画布完成一个数字钟表
qq_42697338的博客
01-18 606
Canvas最初由苹果推出，后来由W3C推广，目前几乎所有浏览器都支持Canvas。 canvas是一个闭合标签，包括宽度和高度属性。默认值为宽300，高150。浏览器不支持canvas时，canvas的文本会显示，通常用来检测浏览器兼容性。 &lt;canvas id="can" width="300" height="300"&gt;您的浏览器不支持canvas&lt;/canvas&gt; ...
html5 canvas绘制时钟表时间特效代码
03-20
在HTML5 Canvas上绘制时钟表时间特效，是利用Canvas API提供的各种绘图函数来模拟真实世界中的钟表行为，如指针转动、时间更新等，从而为网页增添动态视觉效果。 首先，我们需要理解Canvas的基本结构。HTML5的`...
html5 canvas绘制时钟表时间效果源码下载
11-06
在本文中，我们将深入探讨如何使用HTML5 Canvas绘制一个动态更新的时间显示，即一个模拟时钟表的效果。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，为其指定一个ID以便于通过JavaScript进行操作： ```...
Android打造属于自己的时间钟表
09-01
获取当前时间，计算时、分、秒指针的角度，使用`canvas.rotate()`旋转画布，然后绘制指针。 ```java Calendar calendar = Calendar.getInstance(); int hour = calendar.get(Calendar.HOUR_OF_DAY); int minute = ...
html5 canvas绘制时钟表时间.zip
11-18
首先，我们需要在HTML文档中创建一个`<canvas>`元素，它是Canvas画布的基础。HTML代码可能如下： ```html <!DOCTYPE html> <title>HTML5 Canvas 时钟 canvas { border: 1px solid black; } <canvas ...
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
07-28
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
毕业设计—流媒体视频直播服务器-可执行内含文档代码-可执行内含文档代码.zip
07-28
毕业设计—流媒体视频直播服务器-可执行内含文档代码-可执行内含文档代码.zip
【202206】中国汽车潮流观察报告-汽车之家研究院_54页.pdf
07-28
【202206】中国汽车潮流观察报告-汽车之家研究院_54页.pdf
tour-project【程序员VIP专用】.zip
最新发布
07-28
【项目简介】 HTML5+CSS实现雪花旅行社
多个canvas画布合并
06-09
要将多个canvas画布合并成一个画布，可以使用以下步骤： 1. 创建一个新的canvas画布，作为最终合并后的画布。 2. 获取每个要合并的canvas画布的像素数据。 3. 将每个canvas画布的像素数据绘制到新的canvas画布上。 4. 最后，将新的canvas画布插入到文档中。 以下是代码示例： ```javascript // 获取要合并的canvas画布 const canvas1 = document.getElementById('canvas1'); const canvas2 = document.getElementById('canvas2'); const canvas3 = document.getElementById('canvas3'); // 创建新的canvas画布 const mergedCanvas = document.createElement('canvas'); mergedCanvas.width = canvas1.width; mergedCanvas.height = canvas1.height; // 获取要绘制的上下文 const ctx = mergedCanvas.getContext('2d'); // 绘制第一个canvas画布 ctx.drawImage(canvas1, 0, 0); // 绘制第二个canvas画布 ctx.drawImage(canvas2, 0, 0); // 绘制第三个canvas画布 ctx.drawImage(canvas3, 0, 0); // 将新的canvas画布插入到文档中 document.body.appendChild(mergedCanvas); ``` 这样，就可以将多个canvas画布合并成一个画布了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值