canvas画布案例（时钟）

最新推荐文章于 2022-11-30 17:41:04 发布
最新推荐文章于 2022-11-30 17:41:04 发布
阅读量433 收藏 1
点赞数 1
分类专栏： 前端 案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mrslonly/article/details/100988124
版权

时钟源码如下：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            border: 1px solid #cccccc;
        }
    </style>
</head>
<body>
<canvas id="mycanvas" width="400" height="400"></canvas>
<script>
    var mycanvas=document.getElementById('mycanvas');
    var ctx=mycanvas.getContext('2d');//设置画布中心点
    function play(){
        ctx.clearRect(0,0,mycanvas.width,mycanvas.height);
        ctx.save();
        ctx.translate(mycanvas.width / 2, mycanvas.height / 2);
        biaopan();
        run();
        ctx.restore();
        requestAnimationFrame(play);
    }
        play();
    function biaopan() {
        ctx.strokeStyle = '#777';
        ctx.lineWidth = 5;
        //绘制表盘
        ctx.beginPath();
        ctx.arc(0, 0, 150, 0, 2 * Math.PI);
        ctx.stroke();

        //刻度
        //分针刻度
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'blue';
        for (var i = 0; i < 60; i++) {
            ctx.beginPath();
            ctx.moveTo(0, -130);
            ctx.lineTo(0, -140);
            ctx.stroke();
            ctx.rotate(2 * Math.PI / 60);
        }
        //时针刻度
        ctx.lineWidth = 6;
        ctx.strokeStyle = 'blue';
        for (var i = 0; i < 12; i++) {
            ctx.beginPath();
            ctx.moveTo(0, -120);
            ctx.lineTo(0, -140);
            ctx.stroke();
            ctx.rotate(2 * Math.PI / 12);
        }
        //数字
        ctx.textAlign='center';
        ctx.textBaseline='middle';
        ctx.font='18px 微软雅黑';
        for(var i=1;i<13;i++){
            ctx.fillText(i,Math.sin(2*Math.PI/12*i)*110,Math.cos(2*Math.PI/12*i)*-110);
        }
    }
    function run() {

        var d = new Date();
        var h = d.getHours();
        var m = d.getMinutes();
        var s = d.getSeconds();

        //时针
        ctx.save();
        ctx.rotate(2 * Math.PI / 12 * h + (2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60) / 12);
        ctx.strokeStyle = '#a71';
        ctx.lineWidth = 9;
        ctx.beginPath();
        ctx.moveTo(0, 14);
        ctx.lineTo(0, -70);
        ctx.stroke();
        ctx.restore();
        //分针
        ctx.save();
        //秒针走60 分针走一格
        ctx.rotate(2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60);
        ctx.lineWidth = 4;
        ctx.strokeStyle = '#f71';
        ctx.beginPath();
        ctx.moveTo(0, 20);
        ctx.lineTo(0, -100);
        ctx.stroke();
        ctx.restore();
        //秒针
        ctx.save();
        ctx.rotate(2 * Math.PI / 60 * s);
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#f00';
        ctx.beginPath();
        ctx.moveTo(0, 20);
        ctx.lineTo(0, -120);
        ctx.stroke();
        ctx.restore();
        //中心
        ctx.fillStyle = '#777';
        ctx.beginPath();
        ctx.arc(0, 0, 10, 0, 2 * Math.PI);
        ctx.fill();
    }

</script>
</body>
</html>
Sk8？？？
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【学习笔记25】画布canvas+案例
m0_60525480的博客
09-16 1849
canvas属于html元素 H5新元素 需要结合js ,主要用来绘制2d图形 在页面上放置一个canvas元素 就相当于放置了一块画布 可以绘制路径 矩形 圆形 字符 图像 属性： width 默认值 300px height 默认值 150px 注意点：canvas需要写闭合标签 <canvas></canvas> 一般不建议使用css设置它的宽高 方法： ...
Canvas绘制一个时钟
秃头小桂子
05-11 2229
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
Canvas初级小案例
cloki的博客
11-30 1336
canvas 画直线 画虚线 画矩形 画坐标系 随机生成柱状图 画圆 小案例 —— 绘制五环 小案例 —— 画一个字母 “S” 小案例 —— 画八卦镇 小案例 —— 圆形进度条 小案例 —— 饼状图 小案例 —— 小球弹一弹 小案例 —— 小球弹一弹封装 画文字 画一个闹钟
canvas绘制时钟
qq_40710974的博客
09-29 978
大部分的内容都是参考这里的,但是我做了改动并且讲的会更细一点 https://mp.weixin.qq.com/s/qhPg2TjjcFh9l5ZLUsFPSg
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
热门推荐
商务合作 | 共同学习 | 携手共进
02-18 10万+
canvas 简介、canvas 绘图基础(标签介绍、上下文context、beginPath 状态)、案例：绘制表格、绘制饼状图。
javascript canvas实现简易时钟例子
10-14
在这个案例中，我们将讨论如何使用Canvas API来实现一个简单的时钟。首先，我们需要了解HTML5的Canvas元素及其相关方法。 1. **Canvas元素**： HTML5的`<canvas>`元素是一个可绘制图形的区域，它本身不会显示任何...
html5 canvas云粒子数字时钟动画特效
11-06
在本案例中，云粒子可能就是由许多小圆形粒子组成，它们在Canvas上随机移动，模拟云朵飘动的效果。粒子的位置、速度、颜色等属性可以通过数学公式和随机数生成，以实现更自然的运动轨迹。 4. 动画帧更新： 在...
画布：时钟.zip
01-10
在微信小程序的开发中，"画布：时钟.zip"是一个典型的案例，它结合了移动开发、后端服务以及代码实现的多个知识点。这个压缩包包含了一个完整的时钟应用，适用于学习者进行毕设或课设实践。下面将详细介绍相关的技术...
使用js和canvas实现时钟效果
10-14
在这个案例中，我们将利用Canvas的绘图功能，结合JavaScript处理时间数据，来实现一个时钟。 首先，我们需要一个`<canvas>`元素作为画布，并设置其宽度和高度，以及一个ID以便于在JavaScript中引用。在提供的代码中...
HTML5 Canvas圆形灯笼时钟动画特效
06-24
Canvas是一个基于矢量图形的二维画布，可以通过JavaScript来控制。通过调用Canvas API提供的方法，如`fillRect()`, `strokeRect()`, `arc()`, `lineTo()`等，开发者可以绘制线条、形状、图像甚至动画。在这个案例中...
使用canvas绘制超炫时钟
09-28
主要介绍了使用canvas绘制超炫时钟的方法及代码，非常的漂亮，这里推荐给大家
html5 canvas画布绘制圆形时钟代码
09-08
html5 canvas画布绘制圆形时钟代码
canvas绘图 制作的小案例
01-19
canvas绘图 制作的小案例 canvas绘图 制作的小案例 canvas绘图 制作的小案例 canvas绘图 制作的小案例
（转）学习 HTML5 Canvas 这一篇文章就够了
02-27 813
学习 HTML5 Canvas 这一篇文章就够了 一、canvas 简介 ​<canvas>是HTML5新增的，一个可以使用脚本(通常为JavaScript) 在其中绘制图像的HTML元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 ​它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和Safari浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firef...
html5画布时钟cnsd,Canvas：时钟
weixin_30332669的博客
06-28 218
这个时钟是将钟盘的圆心点移到了 canvas 画布中心点。以方便后面的方位计算ctx.translate(width/2,height/2);现定义一个圆盘来显出这个时钟的基本位置ctx.save()ctx.beginPath();ctx.arc(0,0,r+90,0,2*Math.PI,false);ctx.lineWidth= 200;ctx.closePath();ctx.drawImage...
html5 canvas，画布 小案例
web_wq
09-10 1153
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <t...
简单的canvas实例
qq_35176916的博客
01-17 3528
效果图：   完整代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.
一个简单的canvas案例
Jinmy的博客
09-11 2725
canvas的流程： 1.检测widow是否加载完成 2.检测是否支持canvas，有3种方法，案例用第3种：使用引入modernizr.js，到官网www.modernizr.com下载 3.创建画布实例，获取2D上下文 4.drawScreen() 5.标签元素&lt;canvas id="canvas" width="500" height="400"&gt; ...&lt;/ca...
根据数据绘制饼状图(canvas画布例子)
qq_44899153的博客
06-27 697
要求:根据数据绘制饼状图 效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas width="600" heig...
多个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、付费专栏及课程。

余额充值