分享者：lastnigtic，原文地址 
推薦閱讀：跳坑《一百一十一》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開始的，所以我們從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);