用 html5 绘画了一个表

最新推荐文章于 2024-02-16 23:45:17 发布
最新推荐文章于 2024-02-16 23:45:17 发布
阅读量265 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wooddy1982/article/details/86502131
版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>钟表</title>
  </head>
  <body>
    <canvas id="dial" style="width:800px; height:800px; margin:auto; position:absolute; z-index:0" width="800" height="800"></canvas>
    <canvas id="pointer" style="width:800px; height:800px; margin:auto; position:absolute; z-index:9" width="800" height="800"></canvas>
    <script type="text/javascript">
      var tagDial = document.getElementById("dial");
      var tagPointer = document.getElementById("pointer");
      var center = { x: tagDial.clientWidth / 2, y: tagDial.clientHeight / 2 };
      var r = 300;
      var num = [12,1,2,3,4,5,6,7,8,9,10,11];

      function drawDial() {
        var context = tagDial.getContext("2d");
        context.translate(center.x,center.y);
        context.lineWidth = 2;
        context.beginPath();
        context.arc(0, 0, r, 0, 2 * Math.PI);
        context.stroke();

        context.beginPath();
        context.arc(0, 0, 8, 0, 2 * Math.PI);
        context.fill();
        context.stroke();

        context.font = "bold 22px Arial";
        context.textAlign = "center";
        context.textBaseline = "midden";
        for (var i = 0; i < 60; i++) {
          var x1 = Math.sin((i * 6 * Math.PI) / 180) * r * (0 == (i * 6) % 30 ? 0.9 : 0.95);
          var y1 = Math.cos((i * 6 * Math.PI) / 180) * r * (0 == (i * 6) % 30 ? 0.9 : 0.95);
          var x2 = Math.sin((i * 6 * Math.PI) / 180) * r;
          var y2 = Math.cos((i * 6 * Math.PI) / 180) * r;

          if (0 == (i * 6) % 30) {
            var x3 = Math.sin((i * 6 * Math.PI) / 180) * r * 0.85;
            var y3 = Math.cos((i * 6 * Math.PI) / 180) * r * 0.85;
            context.fillText(num[(i * 6) / 30], x3 , -y3+7);
          }

          context.beginPath();
          context.moveTo(x1, -y1);
          context.lineTo(x2, -y2);
          context.stroke();
        }
      }

      function drawPointer() {
        
        var context = tagPointer.getContext("2d");
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();

        h = h > 0 && h < 13 ? h : 0 == h ? 12 : h - 12;
        
        context.clearRect(0, 0, tagPointer.width, tagPointer.height);
        context.beginPath();

        context.strokeStyle = "black";
        context.lineWidth = 10;
        context.moveTo(center.x, center.y);
        
        var x1 = Math.sin((-h * 5 * 6 * Math.PI) / 180) * r * 0.5;
        var y1 = Math.cos((-h * 5 * 6 * Math.PI) / 180) * r * 0.5;
        context.lineTo(center.x-x1, center.y-y1);
        context.stroke();

        context.beginPath();
        context.moveTo(center.x, center.y);
        
        context.lineWidth = 6;
        var x2 = Math.sin((-m * 6 * Math.PI) / 180) * r * 0.75;
        var y2 = Math.cos((-m * 6 * Math.PI) / 180) * r * 0.75;
        context.lineTo(center.x-x2, center.y-y2);
        context.stroke();
        
        context.beginPath();
        context.strokeStyle = "red";
        context.moveTo(center.x, center.y);
        
        context.lineWidth = 2;
        var x3 = Math.sin((-s * 6 * Math.PI) / 180) * r * 0.75;
        var y3 = Math.cos((-s * 6 * Math.PI) / 180) * r * 0.75;
        context.lineTo(center.x-x3, center.y-y3);
        context.stroke();
      }
      drawDial();
      drawPointer();
      setInterval("drawPointer()", 1000);
    </script>
  </body>
</html>

wooddy1982
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5 拖动线条,HTML5绘画与拖放事件
weixin_33916124的博客
06-04 393
HTML5绘画在html5中出现了许多新的特性，绘画功能就是其中之一。由于html5新增的这些新特性，所以也在逐渐取代Flash，毕竟Flash比较占用内存，也经常性奔溃。html5不仅能制作2d的绘画还能做3d的绘画，但是要注意的是这两者使用的函数不一样但都基于canvas。在网络上我们可以搜索到一些使用html5制作的2D或3D的效果图，例如：除了以上这些图片效果外，html5的3D绘画还可以...
HTML每日学习代码：绘制图形
Zb_Xl的博客
07-10 2304
第一个控制点 (cpX1,cpY1) 控制的是曲线离起点的偏离程度和方向，而第二个控制点 (cpX2,cpY2) 控制的是曲线离终点的偏离程度和方向。createLinearGradient(0, 0, 0, c.height) 创建的线性渐变对象会从画布的左上角 (0, 0) 开始，延伸到画布的左下角 (0, c.height)。在这个方法中，offset 参数表示渐变的位置，取值范围为 0 到 1，代表了当前位置相对于渐变起点和终点之间的距离比例。r0 是起点圆的半径，r1 是终点圆的半径。
【HTML】如何使用html制作一个简易的表格？
最新发布
萌萌白白的博客
02-16 8443
如何使用html制作一个简易的表格
html5 图片绘画-贴图
03-22
NULL 博文链接：https://wjlgryx.iteye.com/blog/972479
HTML5 canvas绘图基本使用方法
热门推荐
诗渊的博客
06-26 7万+
本文介绍了html5 中canvas标签的基本使用方法，详细讲解了其重要的属性和方法
HTML5带工具台绘画板特效代码
03-20
总的来说，这个HTML5绘画板项目展示了HTML5、Canvas API以及JavaScript的强大结合，提供了一个用户友好的创作环境，使非专业用户也能轻松地进行在线绘画。通过深入理解这些技术，开发者可以创建出更复杂、更具交互性...
HTML5 Canvas绘画银河特效特效代码
03-20
在这个"HTML5 Canvas绘画银河特效特效代码"示例中，我们看到的是如何利用Canvas API来创建一个互动式的银河系效果，用户可以通过鼠标左键点击并移动来绘制银河，光标的移动速度会影响到绘制的笔触大小，从而增加交互...
html5 canvas绘画生成花朵动画代码
11-06
在这个特定的“html5 canvas绘画生成花朵动画代码”项目中，我们将会探讨如何使用Canvas API来创建一个花朵绽放的动画效果。 首先，Canvas API是HTML5的一个核心特性，它提供了一系列的方法和属性，用于在2D画布上...
8个超棒的HTML5网站设计欣赏
01-31
我们听到了很多关于HTML5的新闻和技术动向，一个又一个的新的东西不停的出现，那么最近HTML5的技术应用又如何呢？HTML5又和CSS及 其Javascript如何一起改变我们的网站设计和实现的呢？带着这些问题，我们将推荐给...
一行HTML也能画画？来一个！
wu_619的博客
10-23 726
再次声明，body里面只有这一行代码，只这一个盒子标签，来个图看看哈哈哈哈哈！！！ <div class="box"></div> 全靠CSS撑场面，敬请欣赏哈哈哈哈哈！ <style> * { margin: 0; padding: 0; } body { background-color: #ccc; } .box { position: relative;
html5画图作品,8款最佳HTML5绘图工具
weixin_33593741的博客
05-30 481
HTML5无疑是当前最受宠的一项技术，今天推荐8款HTML5绘图工具，同样惊艳你的眼球!这些绘图工具大多数是用HTML5画布(Canvas)实现的，部分辅以Javascript。对每一个web设计者来说，制图和草绘是他们工作中最喜欢的一件事情了。草绘和制图是设计工作者工作中一个重要的特征。HTML5将会这方面显露出不可限量的前途。Zwibbler这款工具提供了各种图形的快捷方式，有点像Photos...
使用JS HTML5 画图
yubanban的博客
02-16 7090
1.canvas.getContext(“2d”); 返回一个用于在画布上绘图的环境 2.strokeStyle 绘制的颜色 3.beginPath() 4.Arc(x,y,r,0,Math.PI*2,true||false)画一个圆 5.Stroke() 开始绘制 6.moveTo(x,y)绘制一条线的初始位置 7.lineTo(x,y)一条线的终止位置，多个lineTo一起使用时...
HTML5——网页绘画板
chen_wanfang的博客
03-09 1198
1.HTML5概述：HTML5的设计目的是为了在移动设备上支持多媒体。              HTML5代替了绝大部分HTML4的编码方式，但是与HTML4的编码方式一样。              HTML5中还有很多实用的标签（canvas），它们能实现很多而又酷炫的效果，而且代码量极少。 2.Canvas标签：Canvas对象将给浏览器带来直接在上面绘制矢量图的能力，取代F
用python和html5在画布上画个车子和笑脸
yill_h的博客
06-09 8941
画汽车 python提供了tutle（海龟）模块。这个模块提供了编写向量图的方法，基本上就是画直线，点和曲线。 海龟是怎样工作的，首先让python导入turtle模块。 import turtle 引入turtle模块后，调用turle模块中的Pen函数，它会自动创建一块画布，并且带一个箭头（它就代表海龟）。 t=turtle.Pen() 我们使用刚创建的t的函数给海龟发指令。
【HTML】关于h5中Canvas绘图
土元欧巴的博客
01-10 379
标签仅仅是一块空白的“画布”，并不会绘制图形，需要通过JS脚本对其进行绘制。 标签常用属性： id            设置画布的id style       设置画布的样式 class       设置画布的类 hidden   设置是否隐藏。true为隐藏，false为正常显示 width     设置画布的宽度。当属性值改变，画布中已绘制的图形会被擦除。 he
如何使用HTML canvas来画图
weixin_33852020的博客
06-04 408
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML制作表格和列表
qq_46578318的博客
06-01 813
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数..
表白专用动画
weixin_60553942的博客
09-09 697
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <titl...
用js绘画一个404页面
03-30
但是我可以提供一个简单的HTML/CSS代码，您可以将其作为基础并使用JS添加绘画功能。 HTML代码： ``` <!DOCTYPE html> <html> <title>404 Page Not Found body { background-color: #f2f2f2; font-family: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值