methods: {

    /**
* el:画圆的元素
* r:圆的半径
* w:圆的宽度
* 功能:画背景
*/
drawCircleBg: function (el, r, w) {
const ctx = wx.createCanvasContext(el);
ctx.setLineWidth(w);// 设置圆环的宽度
ctx.setStrokeStyle('#E5E5E5'); // 设置圆环的颜色
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
ctx.arc(r, r, r - w, 0, 2 * Math.PI, false);
//设置一个原点(110,110),半径为100的圆的路径到当前路径
ctx.stroke();//对当前路径进行描边
ctx.draw(); }
}
 
<view class="circle_box" style="width:{{size}}px;height:{{size}}px">

      <canvas class="circle_draw" canvas-id="{{draw}}" style="width:{{size}}px;height:{{size}}px"></canvas>
<slot></slot>
</view>

调用页:

     this.circle = this.selectComponent('#circle1');
this.circle.drawCircle("circle", 100 ,4, 1);

结果是没有效果,

原因是:

createCanvasContext这个是有两个参数的,在page页面默认传了一个This,组件里面 需要传this

const ctx = wx.createCanvasContext('myCanvas',this);

转 : https://segmentfault.com/q/1010000012854159

微信小程序里自定义组件,canvas组件没有效果的更多相关文章

  1. 小程序-文章:微信小程序常见的UI框架/组件库总结

    ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小 ...

  2. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  3. 微信小程序里使用 Redux 状态管理

    微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...

  4. 微信小程序里如何用阿里云上传视频,图片。。

    纯手写,踩了半天多的坑干出来了... 网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里. 话不多说上代码了. upvideo(){ var aliOssParams = ...

  5. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  6. 微信小程序中自定义modal

    微信小程序中自定义modal .wxml <modal hidden="{{hidden}}" title="这里是title" confirm-text ...

  7. 在微信小程序里使用 watch 和 computed

    在开发 vue 的时候,我们可以使用 watch 和 computed 很方便的检测数据的变化,从而做出相应的改变,但是在小程序里,只能在数据改变时手动触发 this.setData(),那么如何给小 ...

  8. 微信小程序里实现跑马灯效果

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...

  9. 微信小程序之自定义select下拉选项框组件

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

随机推荐

  1. C# 中的匿名函数使用

    需求:在图一的callback函数中,我需要使用4个参数,但是又不想把四个参数都传入到requestImg 里面,可以采用上面的 匿名函数的做法.

  2. Android笔记(十二)AndroidManiFest.xml

    AndroidManiFest.xml清单文件是每个Android项目所必须的,它是整个Android应用的全局描述文件.AndroidManiFest.xml清单文件说明了该应用的名称.所使用的图标 ...

  3. 异常-Phoenix HBASE Last region should end with an empty key. You need to create a new region and regioninfo in HDFS to plug the hole

    1 详细异常信息 RROR: There is a hole in the region chain between \x03\x00\x00\x00\x00\x00\x00\x00\x00 and ...

  4. Python-共享引用

    A会改变么? 下面三小段代码,A的值都会改变么? >>> A = "spam" >>> B = A >>> B = " ...

  5. Bash基础——命令替换

    参考:Linux 下Shell 脚本几种基本命令替换区别 Command substitution 命令替换Command substitution https://www.jb51.net/arti ...

  6. 【OF框架】使用原生Sql查询返回实体

    使用原生Sql查询为Entity Framework Core自身的能力,本处描述如何在框架中调用该能力. 框架代码如下: (IoCHelper.Resolve<IDbContextCore&g ...

  7. DT6.0二次最后一次开发插件-手机端熊掌号定时提交

    今天写完这个,就是DT6.0最后开放的插件,因为群里的朋友需要,就写了一个适合DT6的手机端定时插件.不过个人还是喜欢7.0的版本,7.0的插件在上几期分享了,今天就不过多说了! 我这个是初成品,改善 ...

  8. BZOJ1101 [POI2007]Zap 和 CF451E Devu and Flowers

    Zap FGD正在破解一段密码,他需要回答很多类似的问题:对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d.作为FGD的同学,FGD希望得到 ...

  9. 关于Mybatis查询结果的封装

    1.结果封装为List<Object> 接口示例: public List<Members> selectMembersListByName(String name); 配置文 ...

  10. 远程jupyter+pycharm配置

    前言 作为一个数据工程师,最喜欢的事情就是不停的在现实的服务端环境调试代码的参数.我们在本地的环境与生产的状况决然不同,我们一开始在本地写代码测试再部署到服务端的三板斧就不适用了. 最好的方式可以直接 ...