canvas时钟

最新推荐文章于 2023-07-26 16:00:48 发布
最新推荐文章于 2023-07-26 16:00:48 发布
阅读量142 收藏
点赞数 1
分类专栏： 传统HTML和CSS样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36826618/article/details/102687057
版权

在这里插入图片描述
代码：《精通HTML5+CSS3+JavaScript网页设计》
做个笔记

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <canvas id="canvas" width="200" height="200"></canvas>
</body>
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  if(ctx) {
    var timerId;
    var frameRate = 60;
    function canvObject() {
      this.x = 0;
      this.y = 0;
      this.rotation = 0;
      this.borderWidth = 2;
      this.borderColor = '#000000';
      this.fill = false;
      this.fillColor = '#ff0000';
      this.update = function() {
        if(!this.ctx) throw new Error('您没有指定ctx对象。');
        var ctx = this.ctx;
        ctx.save();
        ctx.lineWidth = this.borderColor;
        ctx.strokeStyle = this.borderColor;
        ctx.fillStyle = this.fillColor;
        ctx.translate(this.x, this.y);
        if(this.rotation) ctx.rotate(this.rotation * Math.PI/180);
        if(this.draw) this.draw(ctx);
        if(this.fill) ctx.fill();
        ctx.stroke();
        ctx.restore();
      }
    }
    function Line(){};
    Line.prototype = new canvObject();
    Line.prototype.fill = false;
    Line.prototype.start =[0,0];
    Line.prototype.end =[5,5];
    Line.prototype.draw = function(ctx){
      ctx.beginPath();
      ctx.moveTo.apply(ctx,this.start);
      ctx.lineTo.apply(ctx,this.end);
      ctx.closePath();
    };

    function Circle(){};
    Circle.prototype = new canvObject();
    Circle.prototype.draw = function(ctx){
      ctx.beginPath();
      ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
      ctx.closePath();
    };

    var circle = new Circle();
    circle.ctx = ctx;
    circle.x = 100;
    circle.y = 100;
    circle.radius = 90;
    circle.fill = true;
    circle.borderWidth = 6;
    circle.fillColor = '#ffffff';

    var hour = new Line();
    hour.ctx = ctx;
    hour.x = 100;
    hour.y = 100;
    hour.borderColor = "#000000";
    hour.borderWidth = 10;
    hour.rotaon = 0;
    hour.start = [0,20];
    hour.end = [0,-50];

    var minute = new Line();
    minute.ctx = ctx;
    minute.x = 100;
    minute.y = 100;
    minute.borderColor = "#333333";
    minute.borderWidth = 7;
    minute.rotaon = 0;
    minute.start = [0,20];
    minute.end = [0,-70];

    var seconds = new Line();
    seconds.ctx = ctx;
    seconds.x = 100;
    seconds.y = 100;
    seconds.borderColor = "#ff0000";
    seconds.borderWidth = 4;
    seconds.rotaon = 0;
    seconds.start = [0,20];
    seconds.end = [0,-80];

    var center = new Circle();
    center.ctx = ctx;
    center.x = 100;
    center.y = 100;
    center.radius = 5;
    center.fill = true;
    center.borderColor = 'orange';

    for(var i=0,ls=[],cache;i<12;i++){
      cache = ls[i] = new Line();
      cache.ctx = ctx;
      cache.x = 100;
      cache.y = 100;
      cache.borderColor = "green";
      cache.borderWidth = 2;
      cache.rotation = i * 30;
      cache.start = [0, -70];
      cache.end = [0, -80];
    }

    timerId = setInterval(function () {
      // 清除画布
      ctx.clearRect(0,0,200,200);
      // 填充背景色
      ctx.fillStyle = 'orange';
      ctx.fillRect(0,0,200,200);
      // 表盘
      circle.update();
      // 刻度
      for(var i=0;cache = ls[i++];)cache.update();
      // 时针
      hour.rotation = (new Date()).getHours() * 30;
      hour.update();
      // 分针
      minute.rotation = (new Date()).getMinutes() * 6;
      minute.update();
      // 秒针
      seconds.rotation = (new Date()).getSeconds() * 6;
      seconds.update();
      // 中心圆
      center.update();
    },(1000/frameRate) | 0);
  } else {
    alert('您的浏览器不支持Canvas无法预览时钟！');
  }
</script>
</html>
痴心的萝卜
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Canvas绘制一个时钟
秃头小桂子
05-11 2231
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
canvas实现时钟
m0_56274171的博客
07-07 708
canvas实现时钟
Canvas实现简单时钟表盘
qq_31808873的博客
05-15 521
Canvas绘制表盘
canvas之时钟
时光清浅处，一步一安然
07-01 275
在画时钟之前，我们先来聊一聊canvas动画。 驱动动画的方法有以下三种：那么我们制作canvas动画使用哪种更好呢？所以在制作canvas动画时，更推荐使用。制作canvas动画的步骤：那么就让我们看看时钟的动画制作吧： 效果如下：
canvas绘制时钟
qq_41985405的博客
06-07 187
canvas绘制时钟 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content='width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'></meta> </head&g
canvas时钟效果
08-31
总结来说，这个canvas时钟效果是通过JavaScript和HTML5的Canvas API实现的，它结合了时间更新、数字绘制、动画原理以及可能的用户交互，展示了Canvas在动态网页设计中的强大能力。为了完全实现这个时钟，你需要补充...
canvas时钟 javascript
12-21
在这个“canvas时钟 javascript”项目中，我们看到了如何结合canvas和JavaScript来创建一个实时更新的时钟效果。接下来，我们将深入探讨这个知识点。 首先，canvas是一个二维绘图上下文，通过JavaScript的API可以...
Canvas时钟（纯js实现）
09-29
canvas时钟，极其简单的一个纯网页时钟显示，没有框架，没有jQuery，仅仅使用canvas和原生js实现简单纯粹的闹钟。适合新手小白练习代码，也适合需要定制canvas时钟的场景可以参考本代码实现自己的需求。希望在这个...
canvas 时钟
10-28
canvas 时钟
15款基于canvas时钟特效
01-10
15款基于canvas的时钟特效，html5中的canvas制作炫酷时钟
HTML5：canvas制作时钟
02-22
每周定期有公开直播课，有业内大咖为你授业解惑，真实项目案例分享，从零到大神的成功之路，从你相信我开始!!!
HTML5 Canvas 动画时钟
04-08
NULL 博文链接：https://mooring.iteye.com/blog/1594032
canvas画时钟
pumpkin_truck的博客
06-04 2504
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
使用canvas绘制时钟
NanChen的博客
09-09 460
是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。使用clip()函数将该区域（由rect()、arc()方法指定的绘图区域）设定为裁选区。使用Canvas的绘制函数比如，rect()、arc()之类的方法选择好绘图区域。
如何使用h5元素“Canvas”来绘制一个简易的网页时钟（附代码）
weixin_75115821的博客
07-26 752
Canvas是HTML5中的一个元素，用于通过JavaScript和HTML绘制图形、动画和交互式内容。它可以在浏览器中创建和操作位图图像，使开发者可以在网页上实现高度个性化的视觉效果和交互体验。通过Canvas，开发者可以使用JavaScript来绘制图形、文本和图像。可以动态地更新画布上的内容，实现动画效果或响应用户的交互操作。Canvas提供了一组丰富的绘图函数和方法，使开发者可以在画布上绘制直线、矩形、圆形、路径等形状，并可以使用各种样式、颜色和渐变来装饰绘制的图形。
新手用canvas画时钟
qq_44848490的博客
03-31 149
新手用canvas画时钟。
html5css3 canvas时钟
最新发布
05-25
持续集成（CI）和持续部署（CD）是软件开发过程中非常重要的环节，其目的是为了尽可能快地将代码从开发环境交付到生产环境，并保证其质量和稳定性。 持续集成（CI）是指开发人员将代码频繁地提交到版本控制系统，然后通过自动化的构建、测试和代码分析等过程，来验证代码的正确性和稳定性。这样可以尽早地发现和解决问题，减少开发中出现问题的风险。 持续部署（CD）是指在持续集成的基础上，自动化地将代码部署到生产环境中。通过自动化的流程，可以减少手动干预的可能性，提高部

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

痴心的萝卜

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

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

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

打赏作者

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

抵扣说明：

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

余额充值