原创内容，转载请注明原文网址：http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2018/1231/290.html

常州游戏开发运营-用canvas在微信小程序上画时钟教程

最近开始学习canvas，看了慕课网的一个视频，开始自己动手在常州微信小程序开发上画个时钟，

首先我们可以先看以下微信小程序的官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/reference.html

和canvas的手册对比：http://www.w3school.com.cn/tags/html_ref_canvas.asp

我觉得其实除了删减一些内容之外没什么太大的区别

直接贴代码：

wxml

1. <!--index.wxml-->
2. <view class="container">
3. <canvas canvas-id="clock"/>
4. </view>

wxss

1. /**index.wxss**/
2.  
3. .container {
4. height: 100%;
5. width: 100%;
6. }
7.  
8. canvas {
9. height: 100%;
10. width: 100%;
11. }
12.  
13. /*常州网站开发建设有些人会有疑问为什么设置了100%却没有100%，其实要到app.wxss里设置一下*/
14. /**app.wxss**/
15. page{
16. width:100%;
17. height:100%;
18. }

js

1. Page({
2. data: {
3. width: 0,
4. height: 0
5. },
6. onLoad: function (options) {
7. var that = this
8. //获取系统信息
9. wx.getSystemInfo({
10. //获取系统信息成功，将系统窗口的宽高赋给页面的宽高
11. success: function (res) {
12. that.width = res.windowWidth
13. // console.log(that.width) 375
14. that.height = res.windowHeight
15. // console.log(that.height) 625
16. // 这里的单位是PX，实际的常州手游开发手机屏幕有一个Dpr，这里选择iphone，默认Dpr是2
17. }
18. })
19. },
20.  
21. onReady: function () {
22. this.drawClock();
23. // 每40ms执行一次drawClock()，人眼看来就是流畅的画面
24. this.interval = setInterval(this.drawClock, 40);
25. },
26.  
27.  
28. // 所有的canvas属性以及Math.sin,Math.cos()等涉及角度的参数都是用弧度表示
29. // 时钟
30. drawClock: function () {
31. const ctx = wx.createCanvasContext('clock');
32. var height = this.height;
33. var width = this.width;
34. // 设置常州游戏开发培训文字对应的半径
35. var R = width / 2 - 60;
36. // 把原点的位置移动到屏幕中间，及宽的一半，高的一半
37. ctx.translate(width / 2, height / 2);
38.  
39. // 画外框
40. function drawBackground() {
41. // 设置线条的粗细，单位px
42. ctx.setLineWidth(8);
43. // 开始路径
44. ctx.beginPath();
45. // 运动一个圆的路径
46. // arc(x,y,半径,起始位置，结束位置，false为顺时针运动)
47. ctx.arc(0, 0, width / 2 - 30, 0, 2 * Math.PI, false);
48. ctx.closePath();
49. // 描出点的路径
50. ctx.stroke();
51. };
52.  
53. // 画时钟数
54. function drawHoursNum() {
55. ctx.setFontSize(20);
56. // 圆的起始位置是从3开始的，所以我们手机App外包从3开始填充数字
57. var hours = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
58. hours.forEach(function (hour, i) {
59. var rad = (2 * Math.PI / 12) * i;
60. var x = R * Math.cos(rad);
61. var y = R * Math.sin(rad);
62. // 因为微信小程序不支持BaseLine这个属性，所以这里我们只能自己手动调整位置
63. if (hour == 12) {
64. ctx.fillText(hour, x - 11, y + 6);
65. } else if (hour == 6) {
66. ctx.fillText(hour, x - 5, y + 6);
67. } else {
68. ctx.fillText(hour, x - 6, y + 6);
69. }
70. })
71. };
72.  
73. // 画数字对应的点
74. function drawdots() {
75. for (let i = 0; i < 60; i++) {
76. var rad = 2 * Math.PI / 60 * i;
77. var x = (R + 15) * Math.cos(rad);