微信小程序Taro开发(3)：canvas制作钟表

cuieney 发布于2019-08-23 14:09 / 1635人阅读

摘要：制作钟表分成两部分，一部分是表盘，一部分是时针分针秒针的走动，首先，先绘制表盘绘制表盘圆半径设置坐标轴原点圆心表盘外圆表盘刻度大格表盘刻度小格表盘时刻数字设置字体样式字体上下居中，绘制时间利用三角函数计算字体坐标表达式开始绘

制作钟表分成两部分，一部分是表盘，一部分是时针、分针、秒针的走动，首先，先绘制表盘：

// 绘制表盘
  getDialClock = () => {
    const width = this.state.width;
    const height = this.state.height;
    const ctx = Taro.createCanvasContext("myCanvas", this.$scope);
    const R =  width/2 - 30;//圆半径
    const r = R - 15;

    //设置坐标轴原点
    ctx.translate(width/2, height/2);
    ctx.save();

    // 圆心
    ctx.beginPath();
    ctx.arc(0, 0, 5, 0, 2 * Math.PI, true);
    ctx.fill();
    ctx.closePath();

    // 表盘外圆
    ctx.setLineWidth(2);
    ctx.beginPath();
    ctx.arc(0, 0, R, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.stroke();

    // 表盘刻度（大格）
    ctx.beginPath();
    ctx.setLineWidth(5);
    for(var i = 0; i < 12; i++) {
      ctx.beginPath();
      ctx.rotate(Math.PI / 6);
      ctx.moveTo(R, 0);
      ctx.lineTo(r, 0);
      ctx.stroke();
    }
    ctx.closePath();

    // 表盘刻度（小格）
    ctx.beginPath();
    ctx.setLineWidth(1);
    for(var i = 0; i < 60; i++) {
      ctx.beginPath();
      ctx.rotate(Math.PI / 30);
      ctx.moveTo(R, 0);
      ctx.lineTo(R-10, 0);
      ctx.stroke();
    }
    ctx.closePath();

    // 表盘时刻（数字）
    ctx.beginPath();
    ctx.setFontSize(16)//设置字体样式
    // ctx.setTextBaseline("middle");//字体上下居中，绘制时间
    for(let i = 1; i < 13; i++) {
      //利用三角函数计算字体坐标表达式
      var x = (r-10) * Math.cos(i * Math.PI / 6 - Math.PI/2);
      var y = (r-10) * Math.sin(i * Math.PI / 6 - Math.PI/2);
      let sz = i + "";
      ctx.fillText(sz, x - 5, y + 5, 15);
    }
    ctx.closePath();


    // 开始绘制
    ctx.draw();
  }

表盘绘制完毕，再绘制时针，分针，秒针的运动，这里需要新建一个组件来专门管理这个时间运动，在组件中，如下：

// 绘制 针表
  drawTime = () => {
    const width = this.props.dataRes.width;
    const height = this.props.dataRes.height;

    const ctx = Taro.createCanvasContext("timeId", this.$scope);
    const R =  width/2 - 30;//圆半径

     //设置坐标轴原点
    ctx.translate(width/2, height/2);
    ctx.save();

    const t = new Date();//获取当前时间
    let h = t.getHours();//获取小时
    h = h>12?(h-12):h;//将24小时制转化为12小时制
    const m = t.getMinutes();//获取分针
    const s = t.getSeconds();//获取秒

   //绘制时针
    ctx.beginPath();
    ctx.setStrokeStyle("green")
    ctx.setLineWidth(10);
    ctx.rotate((Math.PI/6)*(h+m/60+s/3600)-Math.PI/2);
    ctx.moveTo(0,0);
    ctx.lineTo(R-90,0);
    ctx.stroke();
    ctx.restore();
    ctx.save();

    // 绘制分针
    ctx.beginPath();
    ctx.setStrokeStyle("gold")
    ctx.setLineWidth(5);
    ctx.rotate((Math.PI/30)*(m+s/3600)-Math.PI/2);
    ctx.moveTo(0,0);
    ctx.lineTo(R-60,0);
    ctx.stroke();
    ctx.restore();
    ctx.save();

    // 绘制秒针
    ctx.beginPath();
    ctx.setStrokeStyle("red")
    ctx.setLineWidth(1);
    ctx.rotate((Math.PI/30)*s-Math.PI/2);
    ctx.moveTo(0,0);
    ctx.lineTo(R-20,0);
    ctx.stroke();
    ctx.restore();
    ctx.save();


    ctx.draw();

  }

结果显示：

源码地址：
https://gitee.com/hope93/canv...

超融合服务器专线服务 vps制作微信小程序不用编程制作微信小程序视频工具类微信小程序怎么制作微信小程序免费开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100162.html

Taro 优秀学习资源汇总

摘要：多端统一开发框架优秀学习资源汇总官方资源项目仓库官方文档项目仓库官方文档微信小程序官方文档百度智能小程序官方文档支付宝小程序官方文档字节跳动小程序官方文档文章教程不敢阅读包源码带你揭秘背后的哲学从到构建适配不同端微信小程序等的应用小程序最 Awesome Taro 多端统一开发框架 Taro 优秀学习资源汇总 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 评论0 收藏0
微信小程序Taro开发(2)：生命周期及开发中注意点

摘要：入口文件继承自组件基类，它同样拥有组件生命周期，但因为入口文件的特殊性，他的生命周期并不完整，如。支持组件化开发，组件代码可以放在任意位置，不过建议放在下的目录中。生命周期 componentWillMount 在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunch componentDidMount 在微信小程序中这一生命周期方法对应页面的onRe...

morgan 2019-08-23 14:09 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

kun_jian 2019-08-02 15:28 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

J4ck_Chan 2019-08-23 18:32 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

Travis 2019-08-30 11:19 评论0 收藏0