分享者：lastnigtic，原文地址 
推薦閱讀：跳坑《一百一十一》canvas相關(guān)問題說明 
最近開始學(xué)習(xí)canvas，看了慕課網(wǎng)的一個(gè)視頻，開始自己動(dòng)手在微信小程序上畫個(gè)時(shí)鐘，

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

和canvas的手冊(cè)對(duì)比：http://www.w3school.com.cn/tags/html_ref_canvas.asp

我覺得其實(shí)除了刪減一些內(nèi)容之外沒什么太大的區(qū)別

直接貼代碼：

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. /*有些人會(huì)有疑問為什么設(shè)置了100%卻沒有100%，其實(shí)要到app.wxss里設(shè)置一下*/
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. //獲取系統(tǒng)信息
9. wx.getSystemInfo({
10. //獲取系統(tǒng)信息成功，將系統(tǒng)窗口的寬高賦給頁面的寬高
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，實(shí)際的手機(jī)屏幕有一個(gè)Dpr，這里選擇iphone，默認(rèn)Dpr是2
17. }
18. })
19. },
20.  
21. onReady: function () {
22. this.drawClock();
23. // 每40ms執(zhí)行一次drawClock()，人眼看來就是流暢的畫面
24. this.interval = setInterval(this.drawClock, 40);
25. },
26.  
27.  
28. // 所有的canvas屬性以及Math.sin,Math.cos()等涉及角度的參數(shù)都是用弧度表示
29. // 時(shí)鐘
30. drawClock: function () {
31. const ctx = wx.createCanvasContext('clock');
32. var height = this.height;
33. var width = this.width;
34. // 設(shè)置文字對(duì)應(yīng)的半徑
35. var R = width / 2 - 60;
36. // 把原點(diǎn)的位置移動(dòng)到屏幕中間，及寬的一半，高的一半
37. ctx.translate(width / 2, height / 2);
38.  
39. // 畫外框
40. function drawBackground() {
41. // 設(shè)置線條的粗細(xì)，單位px
42. ctx.setLineWidth(8);
43. // 開始路徑
44. ctx.beginPath();
45. // 運(yùn)動(dòng)一個(gè)圓的路徑
46. // arc(x,y,半徑,起始位置，結(jié)束位置，false為順時(shí)針運(yùn)動(dòng))
47. ctx.arc(0, 0, width / 2 - 30, 0, 2 * Math.PI, false);
48. ctx.closePath();
49. // 描出點(diǎn)的路徑
50. ctx.stroke();
51. };
52.  
53. // 畫時(shí)鐘數(shù)
54. function drawHoursNum() {
55. ctx.setFontSize(20);
56. // 圓的起始位置是從3開始的，所以我們從3開始填充數(shù)字
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. // 因?yàn)槲⑿判〕绦虿恢С諦aseLine這個(gè)屬性，所以這里我們只能自己手動(dòng)調(diào)整位置
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. // 畫數(shù)字對(duì)應(yīng)的點(diǎn)
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);