IT基地
用户登陆
我要注册
用户名或密码错误
登 陆
注 册
IT基地 >Mr.Li的博客 >我要发文
微信小程序-圆环绘制
作者:Mr.Li   发布时间:2019-11-18 16:00:18   点击数:36

一、首先下载封装好的js到utils文件夹下

  js文件点击下载:canvas.zip


二、在wxml文件中创建画布

<canvas canvas-id="runCanvas" id="runCanvas" class='canvasclass'></canvas>

可定义画布大小样式等,控制cancasclass样式即可,这里提供一个简单的样式

.cancasclass {
    width: 100%;
    height: 100px;
    float: left;
}


三、在当前页面的JS中如此引用即可

import Canvas from '../../utils/canvas.js' //引用圆环绘制JS
Page({
  ...Canvas.options,
  //页面的初始数据
  data: {
  ...Canvas.data,
  },
  //生命周期函数--监听页面加载
  onLoad: function (options) {
    this.draw('runCanvas',32,1000); //对应画布的ID,百分比进度,动画时长
  },
})

...Canvas.options,和...Canvas.data,照着写即可

本站部分数据来自软件的自动采集,仅用于学习交流,决不用于商用,如有侵犯您的合法权益,请联系我们删除。
发表技术文档,,记录个人生活,聚集意见领袖,众多IT精英,以我们的技术让开发更便捷。
IT基地版权所有,伪版必究 京ICP备17064610号-1
微信QQ空间QQ好友新浪微博FacebookTwitter