Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use Mini Program to create a canvas clock. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

What we are doing today is a WeChat Mini Programs canvas clock, that is, the traditional digital clock. [

Directly above the picture, the effect is shown in the picture.

OnLoad: function () {/ / Save the global variable Index in that, where the function calls var that = this / / to get system information wx.getSystemInfo ({/ / obtain system information successfully) Assign the width and height of the system window to the width and height of the page success: function (res) {that.width = res.windowWidth that.height = res.windowHeight}})}

The first is to read the width and height of the screen, which is to calculate the position of the clock later, so that it can be placed in the center position.

OnReady: function () {/ / call canvasApp function this.canvasClock () / a pair of canvasAPP functions call this.interval = setInterval (this.canvasClock,1000)}

OnReady lifecycle function, which is used to listen to the first rendering of the page. Then add a timer to execute the this.canvasClock function every second.

/ / reset the canvas function function reSet () {context.height = context.height;// each time the canvas is cleared, and then add context.translate (width/2, height/2) to the changed time; / / set the axis origin context.save () / / Save midpoint coordinates 1} / / draw the center circle and the outer circle function circle () {/ / outer circle context.setLineWidth (2); context.beginPath (); context.arc (0,0, width/2-30,0,2 * Math.PI,true) Context.closePath (); context.stroke (); / / Center circle context.beginPath (); context.arc (0,0,8,0,2 * Math.PI, true); context.closePath (); context.stroke () } / / draw font function num () {/ / var R = width/2-60 position / set text distance from clock center context.setFontSize (20) / / set font style context.textBaseline = "middle" / / the font is centered up and down, and the drawing time is for (var I = 1; I

< 13; i++) { //利用三角函数计算字体坐标表达式 var x = R * Math.cos(i * Math.PI / 6 - Math.PI / 2); var y = R * Math.sin(i * Math.PI / 6 - Math.PI / 2); if(i==11||i==12){//调整数字11和12的位置 context.fillText(i, x-12, y+9); }else { context.fillText(i, x-6, y+9); } } } //绘制小格 function smallGrid(){ context.setLineWidth(1); context.rotate(-Math.PI/2);//时间从3点开始，倒转90度 for(var i = 0; i < 60; i++) { context.beginPath(); context.rotate(Math.PI / 30); context.moveTo(width/2-30, 0); context.lineTo(width/2-40, 0); context.stroke(); } } //绘制大格 function bigGrid(){ context.setLineWidth(5); for(var i = 0; i < 12; i++) { context.beginPath(); context.rotate(Math.PI / 6); context.moveTo(width/2-30, 0); context.lineTo(width/2-45, 0); context.stroke(); } } 上面这部分相对来说是固定的，也就是不会动的圆，刻度，数字等。不过因为每次画都需要清除一次画布，所以这一部分也需要再循环里面。 function move(){ var t = new Date();//获取当前时间 var h = t.getHours();//获取小时 h = h>

12? (hmur12): hashing / converting the 24-hour system to 12-hour var m = t.getMinutes (); / / getting the minute hand var s = t.getSeconds (); / / getting the second hand context.save (); / / saving 2 context.setLineWidth again (7) / / rotation angle = 30 degrees * (h+m/60+s/3600) / / minute hand rotation angle = 6 degrees * (m+s/60) / / second hand rotation angle = 6 degrees * s context.beginPath (); / / drawing hour hand context.rotate ((Math.PI/6) * (h+m/60+s/3600)); context.moveTo (- 20) Context.lineTo (width/4.5-20 context.save 0); context.stroke (); context.restore (); / / restore to 2, (initially unrotated) avoid rotating superimposed context.save (); / / 3 / / draw minute hand context.setLineWidth (5); context.beginPath () Context.rotate ((Math.PI/30) * (m+s/60)); context.moveTo (- 20Let0); context.lineTo (width/3.5-20Let0); context.stroke (); context.restore (); / / restore to 3, (initially unrotated state) avoid rotating superimposed context.save () / / draw the second hand context.setLineWidth (2); context.beginPath (); context.rotate ((Math.PI/30) * s); context.moveTo (- 20); context.lineTo (width/3-20); context.stroke ();}

This last step is the most difficult, and the difficulty is to calculate the relationship before the hour hand, minute hand and second hand. But these are all mathematical formulas, and as long as the angles are calculated, the rest will be easy to do.

So much for sharing about how to use Mini Program to create a canvas clock. I hope the above can be helpful and learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.