canvas画时钟案例

最新推荐文章于 2023-03-20 19:51:07 发布
最新推荐文章于 2023-03-20 19:51:07 发布
阅读量152 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42374676/article/details/106428511
版权 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>钟表</title>
    <style>
        #canvas {
            border: 1px solid #000;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),
            deg = Math.PI / 180;
        context.translate(200, 200);

        function dialPlate() { //创建表盘
            context.clearRect(-150, -150, 400, 400); //清除画布
            context.beginPath();
            context.arc(0, 0, 150, 0, 360 * deg);
            context.lineWidth = 3;
            context.stroke();
            context.closePath();
            //创建刻度
            for (var i = 1; i <= 60; i++) {
                context.beginPath();
                context.save();
                context.rotate(6 * i * deg);
                context.moveTo(0, -150);
                if (i % 15 == 0) {
                    context.strokeStyle = 'red';
                    context.lineWidth = 3;
                    context.lineTo(0, -135);
                    context.stroke();
                } else if (i % 5 == 0) {
                    context.strokeStyle = 'orange';
                    context.lineWidth = 2;
                    context.lineTo(0, -140);
                    context.stroke();
                } else {
                    context.strokeStyle = '#000';
                    context.lineWidth = 1;
                    context.lineTo(0, -145);
                    context.stroke();
                }
                context.restore();
                context.closePath();
            }
            //创建数字
            for (var i = 1; i <= 12; i++) {
                context.beginPath();
                context.save();
                context.rotate(30 * i * deg);
                context.textAlign = 'center';
                if (i % 3 == 0) {
                    context.fillStyle = 'red';
                    context.font = "normal 28px arial";
                    context.fillText(i, 0, -110);
                } else {
                    context.font = "normal 20px arial";
                    context.fillText(i, 0, -120);
                }
                context.restore();
                context.closePath();
            }
            //中心点
            context.beginPath();
            context.arc(0, 0, 5, 0, 360 * deg);
            context.fill();
            context.closePath();
        }

        function Pointer() { //创建指针
            var nowdate = new Date(),
                hour = nowdate.getHours() % 12,
                minu = nowdate.getMinutes(),
                second = nowdate.getSeconds();
            var ms = nowdate.getMilliseconds(); //毫秒
            //秒针
            context.beginPath();
            context.save();
            context.lineWidth = 1;
            context.strokeStyle = 'red';
            //context.rotate(6*second*deg);
            context.rotate((ms / 1000 + second) * 6 * deg);
            context.moveTo(0, 20);
            context.lineTo(0, -130);
            context.stroke();
            context.restore();
            context.closePath();
            //分针
            context.beginPath();
            context.save();
            context.lineWidth = 2;
            context.strokeStyle = 'orange';
            //context.rotate((second/60+minu)*6*deg);
            context.rotate((ms / 1000 / 60 + second / 60 + minu) * 6 * deg);
            context.moveTo(0, 10);
            context.lineTo(0, -120);
            context.stroke();
            context.restore();
            context.closePath();
            //时针
            context.beginPath();
            context.save();
            context.lineWidth = 3;
            context.strokeStyle = '#000';
            //context.rotate((second/3600+minu/60+hour)*30*deg);
            context.rotate((ms / 1000 / 60 / 60 + second / 60 / 60 + minu / 60 + hour) * 30 * deg);
            context.moveTo(0, 0);
            context.lineTo(0, -110);
            context.stroke();
            context.restore();
            context.closePath();
        }

        dialPlate();
        Pointer();
        //生硬
        //			setInterval(function(){
        //				dialPlate();
        //				Pointer();
        //			},1000)
        //比较圆滑
        setInterval(function () {
            dialPlate();
            Pointer();
        }, 1000 / 60)
    </script>
</body>

</html>

图片加水印


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="1000" height="500" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
    //准备img对象
    var img = new Image();  
    img.src = 'https://www.vcg.com/creative/collection/?phrase=%E5%9B%BE%E5%83%8F&type=1';
  
    // 加载完成开始绘制
    img.onload=function(){
       //准备canvas环境
       var canvas=document.getElementById("myCanvas");
       var ctx=canvas.getContext("2d");
       // 绘制图片
       ctx.drawImage(img,0,0);
       // 绘制水印
       ctx.font="20px microsoft yahei";
       ctx.fillStyle = "rgba(255,255,255,0.5)";
       ctx.fillText("my images",100,100);
    }
</script>
</body>
</html>
web修理工
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS利用canvas画布功能画时钟
StrangeKNL的博客
09-15 392
方法：通过for循环、计时器来完成时钟制作。最后赋上挂钟代码完整版
html5、canvas绘制本地时钟
weixin_33739523的博客
03-17 79
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas clock</title> </head> <body> <canvas id="clock"...
Canvas时钟转动
houshufen
09-10 738
在我们的桌面上都有时钟，今天，通过canvas画布来实现这个功能，效果如下：一、canvas介绍canvas中文翻译为画布，就如同写字板，它为我们提供了一个绘画环境，我们可以在上面画自己想要画的东西。要说明的一点是canvas是通过javaScript来绘制的，想要在canvas上面画东西，我们首先必须创建一个绘画的环境：//3d绘制环境还不是很稳定 var ogc=oc.getContext("2
玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
04-29 8842
先给个效果图，我画的比较丑，大家可以自己美化一下， 直接上代码： 您的浏览器不支持canvas //获取画布 var clock=document.getElementById('clock'); //设置绘图环境
canvas画布画时钟(事件跟当前时间一样)
qq_44899153的博客
06-27 615
说明:代码里面的注释打开之后可以画出钟表的1-12时刻(在有背景图片是不需要打开) 效果图 1.关掉注释,有背景图 2.打开注释,无背景图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
使用canvas绘制时钟 （http://heeroluo.net/Article/Detail/95）
weixin_30599769的博客
03-30 98
准备工作 在HTML中指定一个区域放置时钟： <div id="clock" style="position: relative;"></div> 时钟的一些外观设定： var width = 260; // 桌布宽度var height= 260; // 桌布高度var dot = {x : width / 2,y : height / 2,radius : ...
canvas画时钟小案例
qq_53245972的博客
03-20 117
利用canvas画一个时钟的案例
H5的canvas画时钟
10-20
<title>Canvas时钟 canvas { border: 1px solid black; } <canvas id="clock" width="300" height="300"></canvas> <script src="clock.js"></script> ``` 接着，我们创建一个名为`clock.js`的...
js Canvas实现的日历时钟案例分享
10-20
本文分享的是一个利用JavaScript和Canvas技术实现的日历时钟案例。日历时钟是一种将时间的流逝以图形化的方式展示给用户，常见的如日历、时钟等。在本案例中，作者通过编码实现了一个在网页上展示的动态日历时钟。 ...
JavaScript canvas动画实现时钟效果
10-15
在本文中，我们将深入探讨如何使用JavaScript以及HTML5的Canvas API来创建一个动画时钟效果。这是目前前端开发中一个非常实用的...这不仅能够作为学习Canvas的一个实践案例，还可以增加我们页面的交互性和视觉效果。
html5 canvas云粒子数字时钟动画特效
11-06
在本案例中，云粒子可能就是由许多小圆形粒子组成，它们在Canvas上随机移动，模拟云朵飘动的效果。粒子的位置、速度、颜色等属性可以通过数学公式和随机数生成，以实现更自然的运动轨迹。 4. 动画帧更新： 在...
综合实例桌面时钟--Canvas的综合实践
chenzhao635的专栏
02-02 216
主要是注意里面涉及到的知识点: 状态的保存和恢复 Saving and restoring state 是绘制复杂图形时必不可少的操作。 save() 和 restore() save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。 ​Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。 1、关于 save() ：Canvas状态存储在栈中，每当save...
使用canvas实现简单的时钟效果
JiangLittleBai的博客
01-21 1668
这次要借助canvas实现时钟效果，展示当前时间，形状为圆形。 完整实现效果截图如上 关键点 时钟效果的实现主要分为3部分 1、绘制表盘、大小刻度、1~12 等静态部分的绘制 2、展示当前时间 3、时针、分针和秒针动起来 绘制静态部分 首先得到canvas和canvas的绘图环境 var canvas=document.getElementById("canv
江西财经大学在广东2021-2024各专业最低录取分数及位次表.pdf
09-08
全国各大学在广东省2021~2024年各专业最低录取分数及位次
仿真模拟电击穿路径的模型，可以自定义模型形状，利用有限元comsol相场法模拟，采用PDE模块自定义方程，通过求解偏微分方程来实
最新发布
09-08
仿真模拟电击穿路径的模型，可以自定义模型形状，利用有限元comsol相场法模拟，采用PDE模块自定义方程，通过求解偏微分方程来实现击穿路径的可视化。
Java课程设计-学生成绩管理系统-Swing+MySQL.zip
09-08
Java课程设计-学生成绩管理系统-Swing+MySQL.zip
中央财经大学在北京2021-2024各专业最低录取分数及位次表.pdf
09-08
全国各大学2021-2024在北京各专业录取分数及最低位次
APS课程设计后端部分.zip
09-08
APS课程设计后端部分
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web修理工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值