canvas之可爱的时钟

最新推荐文章于 2021-03-10 10:54:09 发布
最新推荐文章于 2021-03-10 10:54:09 发布
阅读量114 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44389107/article/details/88383012
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<canvas id="clock" width="500px" height="500px" style="border:1px solid #000"></canvas>
<script>
    var canvas=document.getElementById("clock");
    var ctx=canvas.getContext("2d");
    function drawClock(){
        // 获取系统时间
        var today=new Date();
        var hour=today.getHours();
        var min=today.getMinutes();
        var sec=today.getSeconds();
        // alert(hour);
        hour>12?hour-12:hour;
        // 清空画布
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //绘制时刻度
        ctx.strokeStyle="yellow";
        ctx.lineWidth=10;
        ctx.beginPath(); //起始一条路径
        ctx.arc(250,250,200,0,Math.PI*2);
        ctx.stroke();
        ctx.closePath();//结束路径
        ctx.clip();//按圆框裁剪时钟背景图

        // 绘制表盘背景
        var img =new Image();
        img.src="image/1.jpg";
        ctx.drawImage(img,40,40,420,420);


        for(var i=0;i<12;i++){
            ctx.save();
            ctx.strokeStyle="yellow";
            ctx.lineWidth=7;
            ctx.translate(250,250);//设置原点
            ctx.rotate(30*i*Math.PI/180);//设置旋转角度,隔30度画一个分刻度
            ctx.beginPath();
            ctx.moveTo(0,-197);
            ctx.lineTo(0,-175);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        //绘制分刻度
        for(var i=0;i<60;i++){
            ctx.save();
            ctx.strokeStyle="yellow";
            ctx.lineWidth=5;
            ctx.translate(250,250);//设置原点
            ctx.rotate(6*i*Math.PI/180);//设置旋转角度,隔30度画一个分刻度
            ctx.beginPath();
            ctx.moveTo(0,-195);
            ctx.lineTo(0,-185);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        // 绘制时针
        ctx.save();
        ctx.strokeStyle="pink";
        ctx.lineWidth=7;
        ctx.translate(250,250);
        ctx.rotate(hour*30*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,-130);
        ctx.lineTo(0,0);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        //绘制分针
        ctx.save();
        ctx.strokeStyle="pink";
        ctx.lineWidth=4;
        ctx.translate(250,250);
        ctx.rotate(min*6*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,-150);
        ctx.lineTo(0,0);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        // 绘制秒针
        ctx.save();
        ctx.strokeStyle="pink";
        ctx.lineWidth=3;
        ctx.translate(250,250);
        ctx.rotate(sec*6*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0,-170);
        ctx.lineTo(0,0);
        ctx.stroke();
        ctx.closePath();
        // cxt.restore();

        // 美化表盘,中间小圆
        ctx.beginPath();
        ctx.arc(0,0,7,0,Math.PI*2);
        ctx.fillStyle="yellow";
        ctx.fill();
        ctx.strokeStyle="pink";
        ctx.stroke();
        ctx.closePath();

        // 秒针上的小圆
        ctx.beginPath();
        ctx.arc(0,-140,7,0,Math.PI*2);
        ctx.fillStyle="yellow";
        ctx.fill();
        ctx.strokeStyle="pink";
        ctx.stroke();
        ctx.closePath();
        ctx.restore();

        //定位时间
        var h=hour;
        var m=min;
        var s=sec;
        var one=h>9?h:('0'+h);
        var two=m>9?m:('0'+m);
        var three=s>9?s:('0'+s);
        ctx.beginPath();
        ctx.fillStyle='rgb(60,253,125)';
        ctx.font='20px 微软雅黑';
        ctx.fillText(one+':'+two+':'+three,210,380);
        ctx.closePath();
        //文本
        var str = "time keeping";
        ctx.font = "20px 宋体";
        ctx.fillStyle = "#eee";
        ctx.fillText(str ,190,410);

    }
    drawClock();
    setInterval(drawClock,1000);//设置定时器

</script>
</body>
</html>

weixin_44389107
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端 | （十四）canvas基本用法 | 尚硅谷前端HTML5教程(html5入门经典)
知识库搭建ing
11-03 694
canvas基本用法
h5用canvas实现漂亮的时钟效果
11-06
h5用canvas实现漂亮的时钟效果 h5用canvas实现漂亮的时钟效果
Canvas圆形时钟
weixin_45820444的博客
10-11 3830
  今天带来一个圆形时钟，用JQ编写的Canvas 代码。Canvas 的神奇之处就在于，可以自行绘制图片不需要外部引入，当你深入了解这项技术的时候，你也会忍不住赞叹他的神奇之处。   虽然我一再强调，自学也是人生的一门必修课。但哪怕我接连几天不眠不休写出了 Canvas 教程，大家还是置若罔闻，要求我在代码中写下详细注释。从我的角度来讲：不写注释可以减少代码量，大批量的注释会显得十分冗余，我出的 Canvas 教程如果大家认真阅读、练习的话，读懂这些代码不成问题。就好像对着官方文档我可以手写JQuery
canvas画布用圆，直线画一只可爱的哆啦A梦大头
qq_43151592的博客
12-17 769
canvas画布用圆，直线画一只可爱的哆啦A梦大头 图片 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ...
canvas画出简陋版随鼠标转动眼睛且会眨眼的可爱樱桃小丸子
理智lili的博客
08-17 1704
可到我的github上下载文件 需求： 刚加载时鼠标不移动，眼睛会不停地眨眼 眼球会跟随鼠标移动而移动 鼠标不移动时恢复眨眼效果 提示： 除了眼睛是动态以外，其他静态绘制都在static()函数中 利用椭圆的短轴长度先变短后恢复长度来模拟眨眼睛的效果 眼球随鼠标移动关键在于Math.atan2()，他可以求得鼠标坐标与眼球原点的角度差，利用三角函数即可求得眼球的移动路线 ...
canvas绘制可爱猫咪
chenxi1025的博客
11-09 2110
有没有萌到你呢？
用canvas画“哆啦A梦”时钟
weixin_34304013的博客
07-23 103
前言：今天看完了Js书的canvas画布那张，好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子，对哦，我怎么把童年最喜欢的蓝胖子忘了，为了表达我对蓝胖子的歉意，所以今天画了会动的hello world，也算是一种进步咯~ 好的各位，请上车的乘客往里走，请不要堵塞通道，谢谢。我们开车吧~ 正文： 今天先上图吧，看看效果再说 今天的蓝胖子长这样，看到它还是这么胖，...
PHP画a梦,使用canvas画“哆啦A梦”时钟的代码
weixin_35453718的博客
03-10 227
这篇文章主要介绍了JavaScript学习小结之使用canvas画“哆啦A梦”时钟的相关资料,需要的朋友可以参考下前言：今天看完了Js书的canvas画布那张，好开心~又是心爱的canvas~欧耶~之前看到有人建议我画蓝胖子，对哦，我怎么把童年最喜欢的蓝胖子忘了，为了表达我对蓝胖子的歉意，所以今天画了会动的hello world，也算是一种进步咯~好的各位，请上车的乘客往里走，请不要堵塞通道，谢谢...
15个超强悍的CSS3圆盘时钟动画赏析
测试
01-08 690
在网页上，特别是个人博客中经常会用到时钟插件，一款个性化的时钟插件不仅可以让页面显得美观，而且可以让访客看到当前的日期和时间。今天我们给大家收集了15个超强悍的圆盘时钟动画，很多都是基于CSS3，也有一部分利用jQuery和SVG，让我们一起来看看吧。 1、纯CSS3/SVG实现的带秒针表盘圆盘复古时钟 现在的网页上圆盘时钟越来越少见了，更多的是数字时钟和数字日历。之前我们分享过一些基于j...
JavaScript Canvas绘制时钟
02-22
在这个场景中，我们将深入探讨如何使用JavaScript和Canvas API来创建一个实时更新的时钟。 首先，我们需要在HTML中创建一个`<canvas>`元素，它是JavaScript画布的基础： ```html <!DOCTYPE html> <title>...
canvas绘制表盘时钟
08-31
总的来说，使用Canvas API绘制表盘时钟是一个很好的实践项目，它展示了如何利用JavaScript和Canvas API实现动态、交互式的网页图形。这个过程涉及到数学（如角度计算）、时间和日期处理，以及图形绘制技巧，对提升...
使用canvas绘制超炫时钟
09-28
在本文中，我们将深入探讨如何使用HTML5的canvas元素绘制一个炫酷的时钟。canvas是HTML5的一个重要特性，允许开发者在网页上进行动态图形渲染。以下将详细讲解实现这个超炫时钟的步骤、关键代码以及涉及的数学原理。...
canvas 绘制圆形时钟
08-31
以下是如何利用`canvas`创建一个圆形时钟的详细步骤： 首先，我们需要在HTML中设置一个`canvas`元素，并为其分配一个ID以便于在JavaScript中获取引用。例如，可以创建一个200px宽高、id为"clock"的`canvas`元素： ...
canvas时钟效果
08-31
本篇文章将探讨如何使用Canvas实现一个实时更新的时钟效果。首先，我们来分析一下提供的代码片段。 1. **HTML结构**： 代码中并没有直接展示HTML部分，但我们可以推断出应该有一个`<canvas>`元素，用于在页面上...
14款超时尚的HTML5时钟动画
爱前端网
05-02 910
时钟动画在网页应用中也非常广泛，在一些个人博客中，我们经常会看到一些相当个性化的HTML5时钟动画。今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画，其中有圆盘时钟、3D时钟、个性化时钟等，强大的HTML5为时钟动画增添了不少精彩，希望能给大家带来帮助。 1、可爱的CSS3圆盘时钟动画 今天要分享的也是一款可爱的CSS3圆盘时钟动画，时钟背景是乳白色的，显得非常干净，另外，时钟也可
图书馆座位再利用系统小程序源码 图书馆座位再利用系统小程序代码（高分毕设项目源码）
08-26
1. 小程序图书馆座位再利用系统代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：java，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
Python基于Django旅游景点搜索网站设计毕业源码案例设计.zip
最新发布
08-26
Python基于Django旅游景点搜索网站设计毕业源码案例设计.zip
Django+Yolov4目标检测网站（支持图片和视频）.zip
08-26
Django+Yolov4目标检测网站（支持图片和视频）.zip
canvas绘制动态时钟
07-26
Canvas是在HTML5中用于绘制图形的一种技术，可以用来创建各种动态效果，比如动态时钟。要绘制一个动态时钟，你可以按照以下步骤操作： 1. **获取Canvas元素**： 首先，在HTML中创建一个`<canvas>`标签，并给它一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值