找回密码
 登录及注册

QQ登录

只需一步，快速开始

搜索
发新帖

推荐阅读

更多+
广告招商QQ：591022976
广告招商QQ：591022976

漂亮的扁平化canvas时钟 效果

[复制链接]
happy175
117181 happy175 发表于 2016-8-26 09:36:54 1F
漂亮的扁平化canvas时钟

效果如下图：


  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7. </head>

  9. <body>
  10.     <canvas id="canvas" style="margin: 20px auto 0;display: block"></canvas>
  11. </body>
  12. <script>
  13. var canvas = document.getElementById("canvas");
  14. canvas.width = 800;
  15. canvas.height = 800;
  16. var img = new Image();
  17. var cxt = canvas.getContext("2d");
  18. window.onload = function() {
  19.     clock()
  20.     setInterval(function(argument) {
  21.         clock()

  23.     }, 1000)
  24. }

  26. function clock() {
  27.     //获取当前时间
  28.     var d = new Date();
  29.     var h, m, s;
  30.     h = d.getHours();
  31.     h = h > 12 ? h - 12 : h;
  32.     m = d.getMinutes();
  33.     s = d.getSeconds();

  35.     //绘制背景纹理
  36.     img.src = "https://wuchujiang.github.io/pages/image/wood.jpg";
  37.     cxt.clearRect(0, 0, canvas.width, canvas.height);
  38.     img.onload = function() {
  39.         cxt.drawImage(img, 0, 0);
  40.         //背景色
  41.         var gra2 = cxt.createLinearGradient(200, 0, 600, 0);
  42.         gra2.addColorStop(0, "#3fccde");
  43.         gra2.addColorStop(0.5, "#3fccde");
  44.         gra2.addColorStop(0.5, "#a2d658");
  45.         gra2.addColorStop(1, "#a2d658");
  46.         cxt.beginPath();
  47.         cxt.arc(400, 400, 180, 0, 2 * Math.PI);
  48.         cxt.closePath();
  49.         cxt.fillStyle = gra2;
  50.         cxt.fill();

  52.         //绘制表盘
  53.         cxt.save();
  54.         var gra = cxt.createLinearGradient(0, 0, 0, 600);
  55.         gra.addColorStop(0, "#f7f9f7")
  56.         gra.addColorStop(1, "#e0ecde");
  57.         cxt.beginPath();
  58.         cxt.arc(400, 400, 200, 0, 2 * Math.PI, true);
  59.         cxt.arc(400, 400, 180, 0, 2 * Math.PI, false);
  60.         cxt.fillStyle = gra;
  61.         cxt.shadowOffsetX = 0;
  62.         cxt.shadowOffsetY = 10;
  63.         cxt.shadowBlur = 30;
  64.         cxt.shadowColor = "rgba(0,0,0,0.3)";
  65.         cxt.fill()
  66.         cxt.restore();

  68.         //绘制刻度
  69.         for (var i = 1; i <= 60; i++) {
  70.             cxt.save();
  71.             cxt.translate(400, 400);
  72.             cxt.beginPath();
  73.             cxt.rotate((i * (360 / 60)) / 180 * Math.PI);
  74.             var y = i % 5 ? -150 : -147
  75.             var sty = i % 5 ? "rgba(255,255,255,0.6)" : "#fff";
  76.             cxt.moveTo(0, y);
  77.             cxt.lineTo(0, -160);
  78.             cxt.closePath();
  79.             cxt.strokeStyle = sty;
  80.             cxt.lineWidth = 2;
  81.             cxt.stroke();
  82.             cxt.restore();
  83.         }

  85.         //绘制时间刻度
  86.         for (var i = 1; i <= 12; i++) {
  87.             cxt.save();
  88.             cxt.translate(400, 400);
  89.             cxt.font = "normal 20px Georgia";
  90.             cxt.textAlign = "center";
  91.             cxt.textBaseline = "middle";
  92.             cxt.fillStyle = "#fff";
  93.             cxt.fillText(i, Math.cos((-90 + i * 360 / 12) / 180 * Math.PI) * 130, Math.sin((-90 + i * 360 / 12) / 180 * Math.PI) * 130)
  94.             cxt.restore();
  95.         }

  97.         //黑圈
  98.         var gra4 = cxt.createRadialGradient(400, 400, 8, 400, 400, 6);
  99.         gra4.addColorStop(0, "#000");
  100.         gra4.addColorStop(1, "#111");
  101.         cxt.beginPath();
  102.         cxt.arc(400, 400, 10, 0, 2 * Math.PI);
  103.         cxt.fillStyle = gra4;
  104.         cxt.fill();

  106.         //绘制时针。
  107.         cxt.save();
  108.         cxt.translate(400, 400);
  109.         cxt.rotate((h + m / 60) * 30 / 180 * Math.PI)
  110.         cxt.beginPath();
  111.         cxt.moveTo(0, 25);
  112.         cxt.lineTo(0, -100);
  113.         cxt.lineWidth = 4;
  114.         cxt.strokeStyle = "#fff";
  115.         cxt.shadowOffsetX = 6;
  116.         cxt.shadowOffsetY = 6;
  117.         cxt.shadowBlur = "7";
  118.         cxt.shadowColor = "rgba(0,0,0,0.2)";
  119.         cxt.stroke();
  120.         cxt.restore();

  122.         //绘制分针。
  123.         cxt.save();
  124.         cxt.translate(400, 400);
  125.         cxt.rotate((m + s / 60) * 6 / 180 * Math.PI);
  126.         cxt.beginPath();
  127.         cxt.moveTo(0, 25);
  128.         cxt.lineTo(0, -110);
  129.         cxt.lineWidth = 3;
  130.         cxt.strokeStyle = "#fff";
  131.         cxt.shadowOffsetX = 6;
  132.         cxt.shadowOffsetY = 6;
  133.         cxt.shadowBlur = "7";
  134.         cxt.shadowColor = "rgba(0,0,0,0.2)";
  135.         cxt.stroke();
  136.         cxt.restore();

  138.         //绘制秒针。
  139.         cxt.save();
  140.         cxt.translate(400, 400);
  141.         cxt.rotate(s * 6 / 180 * Math.PI);
  142.         cxt.beginPath();
  143.         cxt.strokeStyle = "#fff";
  144.         cxt.moveTo(0, 20);
  145.         cxt.lineTo(0, -135);
  146.         cxt.closePath();
  147.         cxt.shadowOffsetX = 6;
  148.         cxt.shadowOffsetY = 6;
  149.         cxt.shadowBlur = "7";
  150.         cxt.shadowColor = "rgba(0,0,0,0.2)";
  151.         cxt.lineWidth = 2;
  152.         cxt.stroke();
  153.         cxt.beginPath();
  154.         cxt.arc(0, -130, 6, 0, 2 * Math.PI)
  155.         cxt.closePath();
  156.         cxt.fillStyle = "#fff";
  157.         cxt.fill();
  158.         cxt.restore();

  160.         //圆圈
  161.         cxt.save();
  162.         var gra3 = cxt.createRadialGradient(400, 400, 3, 400, 400, 6);
  163.         gra3.addColorStop(0, "#fff");
  164.         gra3.addColorStop(1, "#f0f0f0");
  165.         cxt.beginPath();
  166.         cxt.arc(400, 400, 6, 0, 2 * Math.PI);
  167.         cxt.fillStyle = gra3;
  168.         cxt.fill();
  169.         cxt.restore();

  171.         //文字
  172.         cxt.save();
  173.         cxt.font = "normal 16px Georgia";
  174.         cxt.fillStyle = "#fff";
  175.         cxt.textAlign = "center";
  176.         cxt.textBaseline = "middle";
  177.         cxt.shadowOffsetX = 0;
  178.         cxt.shadowOffsetY = 2;
  179.         cxt.shadowBlur = "1";
  180.         cxt.shadowColor = "rgba(0,0,0,0.1)";
  181.         cxt.fillText("CANVAS", 400, 490);
  182.         cxt.restore();
  183.     }
  184. }
  185. </script>
  186. </html>
复制代码



漂亮

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？登录及注册

x

相关帖子

设计源的微博：http://weibo.com/techued 设计源微信公众号：web-tech
使用道具 举报 回复
lushan517034 发表于 2017-6-30 18:34:03
2F
回不回呢，考虑再三，还是不回了吧。
中国质量认证中心网         http://www.rdjlt.com/
cqc中国质量认证中心         http://www.rdjlt.com/
中国质量认证中心         http://www.rdjlt.com/
质量体系认证权威机构         http://www.rdjlt.com/
权威iso体系认证         http://www.rdjlt.com/
中国ccc认证         http://www.rdjlt.com/
中国强制认证ccc         http://www.rdjlt.com/
中国ccc认证网         http://www.rdjlt.com/
中国ccc认证平台         http://www.rdjlt.com/
快速体系认证         http://www.rdjlt.com/
快速CCC认证         http://www.rdjlt.com/
荣誉认证         http://www.rdjlt.com/
AAA企业信用评级         http://www.rdjlt.com/
弹柜认证         http://www.rdjlt.com/
投标资质认证         http://www.rdjlt.com/
中国最大的认证咨询公司         http://www.rdjlt.com/
变频电源 http://www.rwdlt.com/
可编程电源 http://www.rwdlt.com/
大功率直流电源http://www.rwdlt.com
深圳市阜源科技有限公司http://www.rwdlt.com/
变频电源http://www.rwdlt.com/
可编程电源http://www.rwdlt.com/
大功率直流电源http://www.rwdlt.com/
深圳市阜源科技有限公司http://www.rwdlt.com/
服装erp              http://www.hanson.cn/
设计源的微博：http://weibo.com/techued 设计源微信公众号：web-tech
使用道具 举报 回复 支持 反对
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 登录及注册

本版积分规则

免责声明：本论坛所有文章、软件、图片均由网友发贴上传，包括本站网友原创及部分转贴自互连网,软件及文章的版权属于原作者
如果本站中有内容侵犯了您的版权，请您通知我们的管理员,管理员(Email:admin@websjy.com)及时取得您的受权或马上删除
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论!

QQ|鄂公网安备 42011102000510号|Archiver|手机版|设计源-论坛 ( 鄂ICP备19023897号-2 )

GMT+8, 2023-6-6 06:36

快速回复 返回顶部 返回列表