1. methods: {
  2.  
  3. /**
  4. * el:画圆的元素
  5. * r:圆的半径
  6. * w:圆的宽度
  7. * 功能:画背景
  8. */
  9. drawCircleBg: function (el, r, w) {
  10. const ctx = wx.createCanvasContext(el);
  11. ctx.setLineWidth(w);// 设置圆环的宽度
  12. ctx.setStrokeStyle('#E5E5E5'); // 设置圆环的颜色
  13. ctx.setLineCap('round') // 设置圆环端点的形状
  14. ctx.beginPath();//开始一个新的路径
  15. ctx.arc(r, r, r - w, 0, 2 * Math.PI, false);
  16. //设置一个原点(110,110),半径为100的圆的路径到当前路径
  17. ctx.stroke();//对当前路径进行描边
  18. ctx.draw();
  19.  
  20. }
  21. }
  1.  
  1. <view class="circle_box" style="width:{{size}}px;height:{{size}}px">
  2.  
  3. <canvas class="circle_draw" canvas-id="{{draw}}" style="width:{{size}}px;height:{{size}}px"></canvas>
  4. <slot></slot>
  5. </view>

调用页:

  1. this.circle = this.selectComponent('#circle1');
  2. 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. FAILED: SemanticException Unable to determine if hdfs://tmaster:8020/user/root/words.db/test_t2 is encrypted

    使用hive时,建立数据库,建表,写数据: 读数据:select *  from test_t2; 报错SemanticException 原因:建表时使用了其他路径,或者在另一个路径的数据库(建立数 ...

  2. microsoft office 2007 在已经安装pdf maker的情况下另存为没有adobe pdf选项

    通常,此类情况是pdf maker 插件被禁用导致,点击office 2007左上角菜单栏,选项,加载项,在管理处选择禁用项目, 找到acrobat pdf maker office com addi ...

  3. 数据库管理工具-Navicat Premium 12

    首先感谢下github上大佬,我才能使用这个软件.也可以直接浏览https://github.com/DoubleLabyrinth/navicat-keygen进行安装,非常详细. 1.https: ...

  4. dict sorted by value. 字典根据 值排序

    d = [('a', 24), ('g', 52), ('i', 12)] print(sorted(d),key = lambda x:x[1]) sorted (字典,排序的依据: 字典[key] ...

  5. cuda实现向量相加

    cuda实现向量相加 博客最后附上整体代码 如果有说的不对的地方还请前辈指出, 因为cuda真的接触没几天 一些总结(建议看) cuda 并不纯GPU在运行程序, 而是 cpu 与 gpu 一起在运行 ...

  6. SpringCloud2.0 概述 基础教程(一)

    1.SpringCloud简介 Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智能路由,微代理,控制总线,一次性令牌,全局锁,领导选举 ...

  7. golang 时间的比较,time.Time的初始值?

    参考: https://golangcode.com/checking-if-date-has-been-set/ https://stackoverflow.com/questions/209243 ...

  8. mali tbr Forward Pixel Kill

    https://community.arm.com/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-20-66 ...

  9. SQL:自增主键的获取@@IDENTITY 和 SCOPE_IDENTITY 的区别

    @@IDENTITY 返回当前会话所有作用域的最后一个ID SCOPE_IDENTITY() 返回当前作用域的最后一个ID 返回上面语句执行后产生的自增主键,这个是目前最可靠的方式: insert i ...

  10. MongoDB 建立与删除索引

    1.1 在独立服务器上面建立索引 在独立服务器上面创建索引,可以在空闲时间于后台建立索引. 在后台建立索引,可利用background:true参数运行 >db.foo.ensureIndex( ...