用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

用canvas在微信小程序上画时钟教程

纸飞机 2018-3-8 09:37

分享者:lastnigtic,原文地址 推荐阅读: 最近开始学习canvas,看了慕课网的一个视频,开始自己动手在微信上画个时钟,首先我们可以先看以下微信小程序的官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/ ...

分享者:lastnigtic,

原文地址


推荐阅读:
最近开始学习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. class="container">
  2. canvas-id="clock"/>

wxss

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

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. onReady: function () {
  21. this.drawClock();
  22. // 每40ms执行一次drawClock(),人眼看来就是流畅的画面
  23. this.interval = setInterval(this.drawClock, 40);
  24. },
  25. // 所有的canvas属性以及Math.sin,Math.cos()等涉及角度的参数都是用弧度表示
  26. // 时钟
  27. drawClock: function () {
  28. const ctx = wx.createCanvasContext('clock');
  29. var height = this.height;
  30. var width = this.width;
  31. // 设置文字对应的半径
  32. var R = width / 2 - 60;
  33. // 把原点的位置移动到屏幕中间,及宽的一半,高的一半
  34. ctx.translate(width / 2, height / 2);
  35. // 画外框
  36. function drawBackground() {
  37. // 设置线条的粗细,单位px
  38. ctx.setLineWidth(8);
  39. // 开始路径
  40. ctx.beginPath();
  41. // 运动一个圆的路径
  42. // arc(x,y,半径,起始位置,结束位置,false为顺时针运动)
  43. ctx.arc(0, 0, width / 2 - 30, 0, 2 * Math.PI, false);
  44. ctx.closePath();
  45. // 描出点的路径
  46. ctx.stroke();
  47. };
  48. // 画时钟数
  49. function drawHoursNum() {
  50. ctx.setFontSize(20);
  51. // 圆的起始位置是从3开始的,所以我们从3开始填充数字
  52. var hours = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
  53. hours.forEach(function (hour, i) {
  54. var rad = (2 * Math.PI / 12) * i;
  55. var x = R * Math.cos(rad);
  56. var y = R * Math.sin(rad);
  57. // 因为微信小程序不支持BaseLine这个属性,所以这里我们只能自己手动调整位置
  58. if (hour == 12) {
  59. ctx.fillText(hour, x - 11, y + 6);
  60. } else if (hour == 6) {
  61. ctx.fillText(hour, x - 5, y + 6);
  62. } else {
  63. ctx.fillText(hour, x - 6, y + 6);
  64. }
  65. })
  66. };
  67. // 画数字对应的点
  68. function drawdots() {
  69. for (let i = 0; i < 60; i++) {
  70. var rad = 2 * Math.PI / 60 * i;
  71. var x = (R + 15) * Math.cos(rad);
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏