Canvas学习-时钟绘制

朱雀 2021-08-02 12:08 592阅读 0赞

Canvas学习-时钟绘制

1. 绘制时钟外边框

  • 创建画布



备注：该容器就是绘制图形的画布。

  • 绘制圆环

    var dom = document.getElementById(‘clock’); //获取元素
    var ctx = dom.getContext(‘2d’); //上下文
    var width = ctx.canvas.width; //上下文的宽度
    var height = ctx.canvas.height; //上下文的高度
    var r = width / 2; //半径

    // 绘制圆环
    function drawBackground() { 

    1. ctx.translate(r, r); //确定坐标远点
    2. ctx.beginPath(); //开始画图
    3. ctx.lineWidth = 10; // 设置线条粗细
    4. ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false); //绘制圆形
    5. ctx.stroke(); //绘制

    }
    drawBackground();

2.绘制时钟内容

  1. // 绘制小时数
  2.     var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
  3.     ctx.font = '18px Arial';
  4.     ctx.textAlign = 'center';
  5.     ctx.textBaseline = 'middle';
  6.     hourNumbers.forEach(function (number, i) { 
  7.         var rad = 2 * Math.PI / 12 * i;
  8.         var x = Math.cos(rad) * (r - 30);
  9.         var y = Math.sin(rad) * (r - 30);
  10.         ctx.fillText(number, x, y);
  11.     })

备注：在绘制小时数的时候，我们应该确定数字与对应弧度的关系，建立数组，填充数字。

3. 绘制小时数对应的圆点

  1. // 绘制小时数对应的点
  2.     for (var i = 0; i < 60; i++) { 
  3.         var rad = 2 * Math.PI / 60 * i;
  4.         var x = Math.cos(rad) * (r - 18);
  5.         var y = Math.sin(rad) * (r - 18);
  6.         ctx.beginPath();
  7.         if (i % 5 === 0) { 
  8.             ctx.fillStyle = "#000";
  9.             ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
  10.         } else { 
  11.             ctx.fillStyle = "#ccc";
  12.             ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
  13.         }
  14.         ctx.fill();
  15.     }

备注：绘制圆点的时候，我们需要区分整点数与非整点数之间的区别，填充不同的背景颜色。

4.绘制是真分针秒针

  1. // 画时针
  2. function drawHour(hour, minute) { 
  3.     ctx.save();
  4.     ctx.beginPath();
  5.     var rad = 2 * Math.PI / 12 * hour;
  6.     var mrad = 2 * Math.PI / 12 / 60 * minute;
  7.     ctx.rotate(rad + mrad);
  8.     ctx.lineWidth = 6;
  9.     ctx.lineCap = 'round';
  10.     ctx.moveTo(0, 10);
  11.     ctx.lineTo(0, -r / 2);
  12.     ctx.stroke();
  13.     ctx.restore();
  15. }
  17. // 画分针
  18. function drawMinute(minute, second) { 
  19.     ctx.save();
  20.     ctx.beginPath();
  21.     var rad = 2 * Math.PI / 60 * minute;
  22.     var srad = 2 * Math.PI / 60 / 60 * second;
  23.     ctx.rotate(rad + srad);
  24.     ctx.lineWidth = 3;
  25.     ctx.lineCap = 'round';
  26.     ctx.moveTo(0, 10);
  27.     ctx.lineTo(0, -r + 30);
  28.     ctx.stroke();
  29.     ctx.restore();
  30. }
  32. // 画秒针
  33. function drawSecond(second) { 
  34.     ctx.save();
  35.     ctx.beginPath();
  36.     ctx.fillStyle = '#c14543';
  37.     var rad = 2 * Math.PI / 60 * second;
  38.     ctx.rotate(rad);
  39.     ctx.moveTo(-2, 20);
  40.     ctx.lineTo(2, 20);
  41.     ctx.lineTo(1, -r + 18);
  42.     ctx.lineTo(-1, -r + 18);
  43.     ctx.lineTo(0, -r + 30);
  44.     ctx.fill();
  45.     ctx.restore();
  46. }

备注：绘制分针的时候，我们需要考虑到分针对其的影响，所以需要计算分针数引起时针的弧度改变。在绘制分针的时候，同样需要考虑秒针对分针的影响。

4. 画中心点

  1. // 画中心点
  2. function drawDot() { 
  3.     ctx.beginPath();
  4.     ctx.fillStyle = '#FFFFFF';
  5.     ctx.arc(0, 0, 3, 2 * Math.PI, false)
  6.     ctx.fill();
  7. }

5. 最终绘制方法

  1. function draw() { 
  2.     ctx.clearRect(0, 0, width, height);
  3.     var now = new Date();
  4.     var hour = now.getHours();
  5.     var minute = now.getMinutes();
  6.     var second = now.getSeconds();
  7.     drawBackground();
  8.     drawHour(hour, minute);
  9.     drawMinute(minute, second);
  10.     drawSecond(second);
  11.     drawDot();
  12.     ctx.restore();
  13. }
  16. draw();
  17. setInterval(draw, 1000);

备注：在绘制图形的时候，我们需要注意一下几点：

  • 绘制之前，我们需要清除画布，避免图形的叠加。
  • 主要保存画布之前的状态，还原状态，避免影响。
  • 利用定时器，每隔一秒钟，重新绘制图片。

6. 效果图

在这里插入图片描述

7. 代码

  1. var dom = document.getElementById('clock'); //获取元素
  2. var ctx = dom.getContext('2d'); //上下文
  3. var width = ctx.canvas.width; //上下文的宽度
  4. var height = ctx.canvas.height; //上下文的高度
  5. var r = width / 2;  //半径
  7. // 绘制圆环
  8. function drawBackground() { 
  9.     ctx.save();
  10.     ctx.translate(r, r); //确定坐标远点
  11.     ctx.beginPath(); //开始画图
  12.     ctx.lineWidth = 10; // 设置线条粗细
  13.     ctx.arc(0, 0, r - 5, 0, 2 * Math.PI, false); //绘制圆形
  14.     ctx.stroke(); //绘制
  17.     // 绘制小时数
  18.     var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
  19.     ctx.font = '18px Arial';
  20.     ctx.textAlign = 'center';
  21.     ctx.textBaseline = 'middle';
  22.     hourNumbers.forEach(function (number, i) { 
  23.         var rad = 2 * Math.PI / 12 * i;
  24.         var x = Math.cos(rad) * (r - 30);
  25.         var y = Math.sin(rad) * (r - 30);
  26.         ctx.fillText(number, x, y);
  27.     })
  30.     // 绘制小时数对应的点
  31.     for (var i = 0; i < 60; i++) { 
  32.         var rad = 2 * Math.PI / 60 * i;
  33.         var x = Math.cos(rad) * (r - 18);
  34.         var y = Math.sin(rad) * (r - 18);
  35.         ctx.beginPath();
  36.         if (i % 5 === 0) { 
  37.             ctx.fillStyle = "#000";
  38.             ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
  39.         } else { 
  40.             ctx.fillStyle = "#ccc";
  41.             ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
  42.         }
  43.         ctx.fill();
  44.     }
  46. }
  51. // 画时针
  52. function drawHour(hour, minute) { 
  53.     ctx.save();
  54.     ctx.beginPath();
  55.     var rad = 2 * Math.PI / 12 * hour;
  56.     var mrad = 2 * Math.PI / 12 / 60 * minute;
  57.     ctx.rotate(rad + mrad);
  58.     ctx.lineWidth = 6;
  59.     ctx.lineCap = 'round';
  60.     ctx.moveTo(0, 10);
  61.     ctx.lineTo(0, -r / 2);
  62.     ctx.stroke();
  63.     ctx.restore();
  65. }
  67. // 画分针
  68. function drawMinute(minute, second) { 
  69.     ctx.save();
  70.     ctx.beginPath();
  71.     var rad = 2 * Math.PI / 60 * minute;
  72.     var srad = 2 * Math.PI / 60 / 60 * minute;
  73.     ctx.rotate(rad + srad);
  74.     ctx.lineWidth = 3;
  75.     ctx.lineCap = 'round';
  76.     ctx.moveTo(0, 10);
  77.     ctx.lineTo(0, -r + 30);
  78.     ctx.stroke();
  79.     ctx.restore();
  80. }
  82. // 画秒针
  83. function drawSecond(second) { 
  84.     ctx.save();
  85.     ctx.beginPath();
  86.     ctx.fillStyle = '#c14543';
  87.     var rad = 2 * Math.PI / 60 * second;
  88.     ctx.rotate(rad);
  89.     ctx.moveTo(-2, 20);
  90.     ctx.lineTo(2, 20);
  91.     ctx.lineTo(1, -r + 18);
  92.     ctx.lineTo(-1, -r + 18);
  93.     ctx.lineTo(0, -r + 30);
  94.     ctx.fill();
  95.     ctx.restore();
  96. }
  98. // 画中心点
  99. function drawDot() { 
  100.     ctx.beginPath();
  101.     ctx.fillStyle = '#FFFFFF';
  102.     ctx.arc(0, 0, 3, 2 * Math.PI, false)
  103.     ctx.fill();
  104. }
  106. function draw() { 
  107.     ctx.clearRect(0, 0, width, height);
  108.     var now = new Date();
  109.     var hour = now.getHours();
  110.     var minute = now.getMinutes();
  111.     var second = now.getSeconds();
  112.     drawBackground();
  113.     drawHour(hour, minute);
  114.     drawMinute(minute, second);
  115.     drawSecond(second);
  116.     drawDot();
  117.     ctx.restore();
  118. }
  121. draw();
  122. setInterval(draw, 1000);

8. 思考

如果画布放大，那么图像会怎么样呢？显然，因为其中部分数据大小是固定写死的，必然出现不协调的地方，此时我们必须考虑到，数据的比例问题。修改思路如下：在宽度、文字大小部分，我们需要采用相对大小。

9. 代码优化

优化思路：首先确定比例，var rem = width/ 200; //比例（因为初始样式的数据是按照200为基准的） ,然后在对应的数字大小部分乘上该比例即可。修改后的代码如下：

  1. var dom = document.getElementById('clock'); //获取元素
  2. var ctx = dom.getContext('2d'); //上下文
  3. var width = ctx.canvas.width; //上下文的宽度
  4. var height = ctx.canvas.height; //上下文的高度
  5. var r = width / 2;  //半径
  6. var rem = width/ 200; //比例（因为初始样式的数据是按照200为基准的）
  8. // 绘制圆环
  9. function drawBackground() { 
  10.     ctx.save();
  11.     ctx.translate(r, r); //确定坐标远点
  12.     ctx.beginPath(); //开始画图
  13.     ctx.lineWidth = 10 * rem; // 设置线条粗细
  14.     ctx.arc(0, 0, r - ctx.lineWidth/2, 0, 2 * Math.PI, false); //绘制圆形
  15.     ctx.stroke(); //绘制
  18.     // 绘制小时数
  19.     var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
  20.     ctx.font = 18* rem + 'px Arial';
  21.     ctx.textAlign = 'center';
  22.     ctx.textBaseline = 'middle';
  23.     hourNumbers.forEach(function (number, i) { 
  24.         var rad = 2 * Math.PI / 12 * i;
  25.         var x = Math.cos(rad) * (r - 30* rem);
  26.         var y = Math.sin(rad) * (r - 30* rem);
  27.         ctx.fillText(number, x, y);
  28.     })
  31.     // 绘制小时数对应的点
  32.     for (var i = 0; i < 60; i++) { 
  33.         var rad = 2 * Math.PI / 60 * i;
  34.         var x = Math.cos(rad) * (r - 18* rem);
  35.         var y = Math.sin(rad) * (r - 18* rem);
  36.         ctx.beginPath();
  37.         if (i % 5 === 0) { 
  38.             ctx.fillStyle = "#000";
  39.             ctx.arc(x, y, 2* rem, 0, 2 * Math.PI, false);
  40.         } else { 
  41.             ctx.fillStyle = "#ccc";
  42.             ctx.arc(x, y, 2* rem, 0, 2 * Math.PI, false);
  43.         }
  44.         ctx.fill();
  45.     }
  47. }
  52. // 画时针
  53. function drawHour(hour, minute) { 
  54.     ctx.save();
  55.     ctx.beginPath();
  56.     var rad = 2 * Math.PI / 12 * hour;
  57.     var mrad = 2 * Math.PI / 12 / 60 * minute;
  58.     ctx.rotate(rad + mrad);
  59.     ctx.lineWidth = 6* rem;
  60.     ctx.lineCap = 'round';
  61.     ctx.moveTo(0, 10* rem);
  62.     ctx.lineTo(0, -r / 2);
  63.     ctx.stroke();
  64.     ctx.restore();
  66. }
  68. // 画分针
  69. function drawMinute(minute, second) { 
  70.     ctx.save();
  71.     ctx.beginPath();
  72.     var rad = 2 * Math.PI / 60 * minute;
  73.     var srad = 2 * Math.PI / 60 / 60 * second;
  74.     ctx.rotate(rad + srad);
  75.     ctx.lineWidth = 3* rem;
  76.     ctx.lineCap = 'round';
  77.     ctx.moveTo(0, 10* rem);
  78.     ctx.lineTo(0, -r + 30* rem);
  79.     ctx.stroke();
  80.     ctx.restore();
  81. }
  83. // 画秒针
  84. function drawSecond(second) { 
  85.     ctx.save();
  86.     ctx.beginPath();
  87.     ctx.fillStyle = '#c14543';
  88.     var rad = 2 * Math.PI / 60 * second;
  89.     ctx.rotate(rad);
  90.     ctx.moveTo(-2* rem, 20* rem);
  91.     ctx.lineTo(2* rem, 20* rem);
  92.     ctx.lineTo(1, -r + 18* rem);
  93.     ctx.lineTo(-1, -r + 18* rem);
  94.     ctx.fill();
  95.     ctx.restore();
  96. }
  98. // 画中心点
  99. function drawDot() { 
  100.     ctx.beginPath();
  101.     ctx.fillStyle = '#FFFFFF';
  102.     ctx.arc(0, 0, 3* rem, 2 * Math.PI, false)
  103.     ctx.fill();
  104. }
  106. function draw() { 
  107.     ctx.clearRect(0, 0, width, height);
  108.     var now = new Date();
  109.     var hour = now.getHours();
  110.     var minute = now.getMinutes();
  111.     var second = now.getSeconds();
  112.     drawBackground();
  113.     drawHour(hour, minute);
  114.     drawMinute(minute, second);
  115.     drawSecond(second);
  116.     drawDot();
  117.     ctx.restore();
  118. }
  121. draw();
  122. setInterval(draw, 1000);

10. 代码下载

链接：canvas学习代码下载

发表评论

表情：
评论列表 （有 0 条评论，592人围观）

还没有评论，来说两句吧...

相关阅读