当前位置:Gxlcms > html代码 > html5如何使用canvas绘制“钟表”图案?(代码实例)

html5如何使用canvas绘制“钟表”图案?(代码实例)

时间:2021-07-01 10:21:17 帮助过:38人阅读

本章给大家介绍html5如何使用canvas绘制“钟表”图案?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、介绍Canvas

Canvas 是指定了长度和宽度的矩形画布,我们将使用新的HTML5 JavaScript,可使用HTML5 JS API 来画出各种图形。不过,canvas本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

现在大部分浏览器都支持canvas,使用canvas前要新建个画布,就是这样

  1. <canvas id="myCanvas" width="200" height="100"></canvas>

二、Canvas中常用的属性和方法

颜色和样式:

fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色

矩形:

rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形(无填充)
clearRect() 在给定的矩形内清除指定的像素

路径:

fill() 填充当前绘图(路径)
stroke() 绘制已定义的路径
beginPath() 起始一条路径,或重置当前路径
moveTo() 把路径移动到画布中的指定点,不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线(用于创建圆形或部分圆)
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中,则返回 true,否则返回 false

文本:

font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
fillText() 在画布上绘制“被填充的”文本
strokeText() 在画布上绘制文本(无填充)
measureText() 返回包含指定文本宽度的对象

图像绘制:

drawImage() 向画布上绘制图像、画布或视频

三、绘制钟表

首先新建一个html文件,新建画板并且给画板增加些样式,就像这样

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>canvas画布</title>
  6. <style type="text/css">
  7. #canvas {
  8. border: 1px solid #000;
  9. margin: 0 auto;
  10. display: block;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <!-- 新建画板 --><canvas id="canvas" width="400" height="400"></canvas>
  16. </body>
  17. </html>

然后开始操作canvas

  1. <script>
  2. //获取canvas标签,并且创建 context 对象
  3. var canvas = document.getElementById('canvas'),
  4. context = canvas.getContext('2d'),
  5. deg = Math.PI / 180;
  6. context.translate(200, 200);
  7. </script>

说明:getContext(“2d”) 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,deg计算圆周率,translate() 画布的位置。
1.创建表盘、数字、刻度、中心点

创建表盘

  1. context.beginPath();
  2. context.arc(0, 0, 150, 0, 360 * deg);
  3. context.lineWidth = 3;
  4. context.stroke();
  5. context.closePath();

创建数字

  1. //创建数字
  2. for (var i = 1; i <= 12; i++) {
  3. context.beginPath();
  4. context.save();
  5. context.rotate(30 * i * deg);
  6. context.textAlign = 'center';
  7. if (i % 3 == 0) {
  8. context.fillStyle = 'red';
  9. context.font = "normal 28px arial";
  10. context.fillText(i, 0, -110);
  11. } else {
  12. context.font = "normal 20px arial";
  13. context.fillText(i, 0, -120);
  14. }
  15. context.restore();
  16. context.closePath();
  17. }

创建刻度

  1. for (var i = 1; i <= 60; i++) {
  2. context.beginPath();
  3. context.save();
  4. context.rotate(6 * i * deg);
  5. context.moveTo(0, -150);
  6. //判断刻度显示颜色
  7. if (i % 15 == 0) {
  8. context.strokeStyle = 'red';
  9. context.lineWidth = 3;
  10. context.lineTo(0, -135);
  11. context.stroke();
  12. } else if (i % 5 == 0) {
  13. context.strokeStyle = 'orange';
  14. context.lineWidth = 2;
  15. context.lineTo(0, -140);
  16. context.stroke();
  17. } else {
  18. context.strokeStyle = '#000';
  19. context.lineWidth = 1;
  20. context.lineTo(0, -145);
  21. context.stroke();
  22. }
  23. context.restore();
  24. context.closePath();
  25. }

创建中心点

  1. context.beginPath();
  2. context.arc(0, 0, 5, 0, 360 * deg);
  3. context.fill();
  4. context.closePath();

效果图:

1.png

2.创建指针

  1. var nowdate = new Date(),
  2. hour = nowdate.getHours() % 12,
  3. minu = nowdate.getMinutes(),
  4. second = nowdate.getSeconds();
  5. var ms = nowdate.getMilliseconds(); //毫秒
  6. //秒针
  7. context.beginPath();
  8. context.save();
  9. context.lineWidth = 1;
  10. context.strokeStyle = 'red';
  11. //context.rotate(6*second*deg);
  12. context.rotate((ms / 1000 + second) * 6 * deg);
  13. context.moveTo(0, 20);
  14. context.lineTo(0, -130);
  15. context.stroke();
  16. context.restore();
  17. context.closePath();
  18. //分针
  19. context.beginPath();
  20. context.save();
  21. context.lineWidth = 2;
  22. context.strokeStyle = 'orange';
  23. //context.rotate((second/60+minu)*6*deg);
  24. context.rotate((ms / 1000 / 60 + second / 60 + minu) * 6 * deg);
  25. context.moveTo(0, 10);
  26. context.lineTo(0, -120);
  27. context.stroke();
  28. context.restore();
  29. context.closePath();
  30. //时针
  31. context.beginPath();
  32. context.save();
  33. context.lineWidth = 3;
  34. context.strokeStyle = '#000';
  35. //context.rotate((second/3600+minu/60+hour)*30*deg);
  36. context.rotate((ms / 1000 / 60 / 60 + second / 60 / 60 + minu / 60 + hour) * 30 * deg);
  37. context.moveTo(0, 0);
  38. context.lineTo(0, -110);
  39. context.stroke();
  40. context.restore();
  41. context.closePath();

效果图:

2.png

是不是以为到现在就结束了,我大声的告诉大家没有,现在才是刚刚开始,接下来就是见证奇迹的时刻。。。

3.最后完成

我们需要把上边的绘制封装成方法,然后不停的绘制不停的清除这样钟表就动起来了

  1. function dialPlate() { //创建表盘
  2. //context.clearRect(-150,-150,400,400);//清除画布
  3. context.beginPath();
  4. context.arc(0, 0, 150, 0, 360 * deg);
  5. context.lineWidth = 3;
  6. context.stroke();
  7. context.closePath();
  8. //创建刻度
  9. for (var i = 1; i <= 60; i++) {
  10. context.beginPath();
  11. context.save();
  12. context.rotate(6 * i * deg);
  13. context.moveTo(0, -150);
  14. if (i % 15 == 0) {
  15. context.strokeStyle = 'red';
  16. context.lineWidth = 3;
  17. context.lineTo(0, -135);
  18. context.stroke();
  19. } else if (i % 5 == 0) {
  20. context.strokeStyle = 'orange';
  21. context.lineWidth = 2;
  22. context.lineTo(0, -140);
  23. context.stroke();
  24. } else {
  25. context.strokeStyle = '#000';
  26. context.lineWidth = 1;
  27. context.lineTo(0, -145);
  28. context.stroke();
  29. }
  30. context.restore();
  31. context.closePath();
  32. }
  33. //创建数字
  34. for (var i = 1; i <= 12; i++) {
  35. context.beginPath();
  36. context.save();
  37. context.rotate(30 * i * deg);
  38. context.textAlign = 'center';
  39. if (i % 3 == 0) {
  40. context.fillStyle = 'red';
  41. context.font = "normal 28px arial";
  42. context.fillText(i, 0, -110);
  43. } else {
  44. context.font = "normal 20px arial";
  45. context.fillText(i, 0, -120);
  46. }
  47. context.restore();
  48. context.closePath();
  49. }
  50. //中心点
  51. context.beginPath();
  52. context.arc(0, 0, 5, 0, 360 * deg);
  53. context.fill();
  54. context.closePath();
  55. }
  56. function Pointer() { //创建指针
  57. var nowdate = new Date(),
  58. hour = nowdate.getHours() % 12,
  59. minu = nowdate.getMinutes(),
  60. second = nowdate.getSeconds();
  61. var ms = nowdate.getMilliseconds(); //毫秒
  62. //秒针
  63. context.beginPath();
  64. context.save();
  65. context.lineWidth = 1;
  66. context.strokeStyle = 'red';
  67. //context.rotate(6*second*deg);
  68. context.rotate((ms / 1000 + second) * 6 * deg);
  69. context.moveTo(0, 20);
  70. context.lineTo(0, -130);
  71. context.stroke();
  72. context.restore();
  73. context.closePath();
  74. //分针
  75. context.beginPath();
  76. context.save();
  77. context.lineWidth = 2;
  78. context.strokeStyle = 'orange';
  79. //context.rotate((second/60+minu)*6*deg);
  80. context.rotate((ms / 1000 / 60 + second / 60 + minu) * 6 * deg);
  81. context.moveTo(0, 10);
  82. context.lineTo(0, -120);
  83. context.stroke();
  84. context.restore();
  85. context.closePath();
  86. //时针
  87. context.beginPath();
  88. context.save();
  89. context.lineWidth = 3;
  90. context.strokeStyle = '#000';
  91. //context.rotate((second/3600+minu/60+hour)*30*deg);
  92. context.rotate((ms / 1000 / 60 / 60 + second / 60 / 60 + minu / 60 + hour) * 30 * deg);
  93. context.moveTo(0, 0);
  94. context.lineTo(0, -110);
  95. context.stroke();
  96. context.restore();
  97. context.closePath();
  98. }
  99. dialPlate();
  100. Pointer();
  101. setInterval(function(){
  102. dialPlate();
  103. Pointer();
  104. },1000/60)

说明:动画每秒执行60次是最好的,所以定时器才让他没秒执行60次。

以上就是html5如何使用canvas绘制“钟表”图案?(代码实例)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行