H5 canvas学习----案例（二）钟表

最新推荐文章于 2023-06-28 08:49:04 发布
最新推荐文章于 2023-06-28 08:49:04 发布
阅读量151 收藏
点赞数
分类专栏： # H5 canvas学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25503949/article/details/106085338
版权

H5 canvas学习----案例（二）钟表

一.钟表刻度的制作：
1.

<canvas id='myCanvas'></canvas>
    <script>
        var myCanvas = document.getElementById('myCanvas');
        myCanvas.width = 1000;
        myCanvas.height = 700;
        var x = 200;
        var y = 200;
        var r = 200;
        var cvs = myCanvas.getContext('2d');
        for (var i = 0; i < 60; i++) {
            cvs.moveTo(x, y);
            //此处可以画出半径，使圆心与弧的起始点相连
            cvs.arc(x, y, r, i * 6 * Math.PI / 180, (i + 1) * 6 * Math.PI / 180)
        }
        cvs.strokeStyle = "#000";
        cvs.stroke();

在这里插入图片描述

cvs.beginPath();//用圆覆盖
        cvs.arc(x, y, r * (19 / 20), 0, 2 * Math.PI)
        cvs.fillStyle = '#fff';
        cvs.fill();
        cvs.strokeStyle = '#fff'
        cvs.stroke();

在这里插入图片描述

cvs.beginPath();
        for (var i = 0; i < 60; i++) {
            cvs.moveTo(x, y);
            cvs.arc(x, y, r, i * 30 * Math.PI / 180, (i + 1) * 30 * Math.PI / 180)
        }
        cvs.lineWidth = 3;
        cvs.strokeStyle = "#000";
        cvs.stroke();

在这里插入图片描述

cvs.beginPath();
        cvs.beginPath();
        cvs.arc(x, y, r * (18 / 20), 0, 2 * Math.PI)
        cvs.fillStyle = '#fff';
        cvs.fill();
        cvs.strokeStyle = '#fff'
        cvs.stroke();

在这里插入图片描述
二.时针，分针和秒针：

1.绘制时针分针，秒针

        //时针
        cvs.beginPath();
        cvs.moveTo(x, y);
        cvs.arc(x, y, r * (8 / 20), 50, 50);
        cvs.lineWidth = 7;
        cvs.strokeStyle = "#000";
        cvs.stroke();


        //分针
        cvs.beginPath();
        cvs.moveTo(x, y);
        cvs.arc(x, y, r * (13 / 20), 86, 86);
        cvs.lineWidth = 4;
        cvs.strokeStyle = "#000";
        cvs.stroke();


        //秒针
        cvs.beginPath();
        cvs.moveTo(x, y);
        cvs.arc(x, y, r * (17 / 20), 20, 20);
        cvs.lineWidth = 1;
        cvs.strokeStyle = "#000";
        cvs.stroke();

在这里插入图片描述
2.具体确定时针分针秒针的位置：

        var x = 200,
            y = 200,
            r = 200,
            date = new Date(),
            hours = date.getHours(),
            minutes = date.getMinutes(),
            seconds = date.getSeconds(),
            H = (-90 + hours * 30) * Math.PI / 180,
            M = (-90 + minutes * 6) * Math.PI / 180,
            S = (-90 + seconds * 6) * Math.PI / 180;
            //为什么要减90度呢，因为我们做圆的时候，起始点在正右方，而钟表的0点在正上方，所以要在基础上逆时针旋转90度，才能达到目标效果


        //时针
        cvs.beginPath();
        cvs.moveTo(x, y);
        cvs.arc(x, y, r * (8 / 20), H, H);
        cvs.lineWidth = 7;
        cvs.strokeStyle = "#000";
        cvs.stroke();


        //分针
        cvs.beginPath();
        cvs.moveTo(x, y);
        cvs.arc(x, y, r * (13 / 20), M, M);
        cvs.lineWidth = 4;
        cvs.strokeStyle = "#000";
        cvs.stroke();


        //秒针
        cvs.beginPath();
        cvs.moveTo(x, y);
        cvs.arc(x, y, r * (17 / 20), S, S);
        cvs.lineWidth = 1;
        cvs.strokeStyle = "#000";
        cvs.stroke();

在这里插入图片描述
3.配置定时器，实时更新:

function timer() {

  //秒针
            cvs.beginPath();
            cvs.moveTo(x, y);
            cvs.arc(x, y, r * (17 / 20), S, S);
            cvs.lineWidth = 1;
            cvs.strokeStyle = "#000";
            cvs.stroke();
        };
        timer();
        setInterval(timer, 1000);

4.调整时针，让其位置更准确：

H = (-90 + hours*30 + minutes/2)*Math.PI/180;

在这里插入图片描述

完整代码如下：！！！

<body>

<canvas id='myCanvas'></canvas>

<script>
var myCanvas = document.getElementById('myCanvas');
myCanvas.width = 1000;
myCanvas.height = 700;
var cvs = myCanvas.getContext("2d");


function timer(){

var x = 200,
	y = 200,
	r = 200,
	date = new Date(),
	hours = date.getHours(),
	minutes = date.getMinutes(),
	seconds = date.getSeconds();

var H = (-90 + hours*30 + minutes/2)*Math.PI/180;
var M = (-90 + minutes*6)*Math.PI/180;
var S = (-90 + seconds*6)*Math.PI/180;

cvs.beginPath();
cvs.arc(x,y,r,0,360*Math.PI/180);
cvs.fillStyle="#fff";
cvs.fill();
cvs.strokeStyle="#CCC";
cvs.stroke();

cvs.beginPath();
for(var i=0;i<60;i++){

	cvs.moveTo(x,y);
	cvs.arc(x,y,r,i*6*Math.PI/180,(i+1)*6*Math.PI/180);

}
cvs.strokeStyle="#000";
cvs.stroke();


cvs.beginPath();
cvs.arc(x,y,r*(19/20),0,2*Math.PI);
cvs.fillStyle="#fff";
cvs.fill();
cvs.strokeStyle="#fff";
cvs.stroke();


cvs.beginPath();
for(var i=0;i<12;i++){

	cvs.moveTo(x,y);
	cvs.arc(x,y,r,i*30*Math.PI/180,(i+1)*30*Math.PI/180);

}
cvs.lineWidth = 3;
cvs.strokeStyle="#000";
cvs.stroke();


cvs.beginPath();
cvs.arc(x,y,r*(18/20),0,2*Math.PI);
cvs.fillStyle="#fff";
cvs.fill();
cvs.strokeStyle="#fff";
cvs.stroke();





//时针
cvs.beginPath();
cvs.moveTo(x,y);
cvs.arc(x,y,r*(8/20),H,H);
cvs.lineWidth = 7;
cvs.strokeStyle="#000";
cvs.stroke();


//分针
cvs.beginPath();
cvs.moveTo(x,y);
cvs.arc(x,y,r*(13/20),M,M);
cvs.lineWidth = 4;
cvs.strokeStyle="#000";
cvs.stroke();


//秒针
cvs.beginPath();
cvs.moveTo(x,y);
cvs.arc(x,y,r*(17/20),S,S);
cvs.lineWidth = 1;
cvs.strokeStyle="#000";
cvs.stroke();

}
timer();
setInterval(timer,1000);
</script>

</body>
啵雨的博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5 canvas学习 ---案例（三）折线图
qq_25503949的博客
05-14 465
H5 canvas学习 —案例（三）折线图 总体效果： 显然，我们要用面向对象的思维，画这个图 html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #myCanvas{ border:1px solid #ccc; } </style> &lt
25 个基于 HTML5 Canvas 的超炫示例
mdpmw的专栏
08-16 2057
尽管，我们大多数人都听过HTML 5，但我们当中许多人实际上并没有意识到它可以做什么。然而，最近有一个HTML 5独具特色的标签Canvas慢慢的流行起来，市场也开始需要它。据说，HTML5 Canvas 是一个使用脚本来绘制图形的元素，通常这意味着要通过JavaScript来实现。简单来说，HTML5 Canvas类似于Flash 程序，只不过是通过JavaScript 绘图，然后这些绘制的图形
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
热门推荐
商务合作 | 共同学习 | 携手共进
02-18 10万+
canvas 简介、canvas 绘图基础(标签介绍、上下文context、beginPath 状态)、案例：绘制表格、绘制饼状图。
前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例
weixin_34320724的博客
12-24 559
2019独角兽企业重金招聘Python工程师标准>>> ...
Html5 Canvas绘图实例
绳锯木断，水滴石穿，专心写文，无问西东！！！
09-14 3893
前些年的时候，突然对Canvas感兴趣，利用空闲时间做一些Canvas小例子进行练习，仅供学习分享使用。如有不足之处，还请指正。 什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素及JavaScript对象 向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度，如下所示： <can
html5之canvas实例（一）
kyrin(云中鹤)
01-25 1962
//画布,将图形画到这上面,超出范围的不显示 var t_canvas1=document.getElementById("t_canvas"); var context1=t_canvas1.getContext("2d"); context1.beginPath(); context1.moveTo(0,0); context1.lineTo(0,290); context1.
ec-canvas 实现echart图表显示
05-19
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
canvas-nest-react.js
01-10
见http://blog.csdn.net/carllucasyu/article/details/79022775
Leaflet.Canvas-Markers-0.2.0
04-22
6. **源码公开**：作为开源项目，Leaflet.Canvas-Markers-0.2.0的源代码托管在GitHub上（https://github.com/corg/Leaflet.Canvas-Markers），允许开发者查看和修改代码，甚至可以根据自身需求进行二次开发。...
android-canvas-donut-chart.7z
07-29
通过"android-canvas-donut-chart"这个示例项目，开发者可以学习到如何在Android中利用Canvas API创建自定义的可视化组件，理解图形绘制的基本原理，并且能掌握数据可视化的实现技巧。这个过程不仅锻炼了编程技能，...
canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器
05-25
我将尝试通过创建一系列教程来解决此问题，以说明文本编辑器的所有重要方面，同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表： 键盘光标导航和选择； ...
HTML5 Canvas动画实例
不断学习，不断进步，提高自己
06-28 2125
在开发在线游戏时，绘制动画是非常重要的。本文介绍一个使用Canvas API实现的动画实例——游戏人物的跑步动画。
H5的canvas画布使用
木头房子的格子铺
08-14 7812
H5的canvas canvas画布 canvas上绘制图形 canvas给绘制的图形设置样式 canvas中绘制图像 canvas中的变形 canvas标签
用h5中canvas实现钟表
weixin_43571052的博客
05-21 350
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
用canvas标签实现网页H5动态时钟
No Back丶的博客
08-13 1497
用canvas标签实现网页H5动态时钟
HTML5 进阶（8）—Canvas案例：使用canvas仿手机画图解锁
weixin_39141044的博客
10-20 1293
以下这种效果。 使用到的技术 canvas基本操作 canvas的离屏 js的dom2级事件注册处理函数 addEventListenter（eventType，listener，useCapture） eventType：事件类型（click、focus、blur）不带on listener：事件处理函数，可以是匿名函数 useCapture：默认值是false，只冒泡不捕获；t...
Crypto_30_vHsm_Types.h
最新发布
07-09
Crypto_30_vHsm_Types
canvas border-shadow
06-03
你的问题是如何使用CSS在canvas元素上添加边框阴影效果。可以通过以下CSS属性来实现： ```css canvas { border: 1px solid #ccc; /* 添加边框 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影 */ } ``...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值