微信小程序里自定义组件,canvas组件没有效果

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

原文地址:https://www.cnblogs.com/fps2tao/p/11100340.html

时间: 2024-10-13 16:16:49

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

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

新年伊始,学习要趁早,点滴记录,学习就是进步! 随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了.对于学习有困难不知道如何提升自己可以加扣:1225462853  获取资料. 下载地址:https://pan.baidu.com/s/1hsU5EIS 微信小程序入门与实战 常用组件API开发技巧项目实战 小程序官方正式公告,开放了更多的入口,个人开发者可以申请

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

ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI  小程序–使用教程 https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.小程序开发中最常用到的一款框架,受广大

微信小程序里各种文件是干什么的?

微信小程序首次进入 其他地方略过,这里讲一下,为什么要勾选"在当前目录中创建quick start项目",quick start项目相当于word文档中的模板,可以在模板的基础上直接修改. 创建好了以后,会看到这个 中间的部分的目录,就是微信小程序的工程结构重要的是图中的这些文件分别是干什么的? 这些文件可以分为四类,分别是以js.wxml.wxss和json结尾的文件.以js结尾的文件,一般情况下是负责功能的,比如,点击一个按钮,按钮就会变颜色. 以wxml为后缀的文件,一般情况下负

微信小程序学习笔记-2-常用组件介绍

微信小程序常用组件 组件的定义: 开发者可以利用微信团队提供的框架中的一系列基础组件进行快速的开发,什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之间. 形式: <tagname property="value"> Content goes here </tagname> 例如: <view class="container">

微信小程序入门与实战/常用组件/API/开发技巧/项目实战 共11章

实战开发电影资讯微信小程序 学习之前需要掌握JavaScript和CSS基础 ----------------课程目录---------------- 第1章:什么是微信小程序 开篇及课程特色介绍 直观感受一下微信小程序 小程序适合做什么样的应用 对开发者的影响 学习基础 小作业 第2章:环境搭建与开发工具 开篇介绍及下载工具 小程序目前情况及限制 小程序开发工具介绍 第3章:开始小程序之旅 本章内容简介 官方种子项目介绍与小程序的文件结构 新建我们自己的项目:ReaderMovie 开始制作项

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

第1章 什么是微信小程序?介绍小程序的特点与适用场景.对开发者的影响以及课程特色!七月老师小程序进阶课<纯正商业应用--微信小程序实战>与<微信小程序商城构建全栈应用>已上线,全面进阶小程序! 第2章 小程序环境搭建与开发工具介绍小程序开发工具的下载与安装.微信Web开发者工具主要功能简介 第3章 从一个简单的"欢迎"页面开始小程序之旅完成第一个小程序页面,并学习小程序的基本目录与文件结构,View.Image.Text组件,RPX自适应单位,Flex弹性盒子模

微信小程序之自定义tabbar

0. 官方指南 # 由于微信小程序的异步机制,页面跳转会出现随机事件 # 目的: 解决认证跳转过程的不友好体验 https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 1. app.json文件的处理 1. 添加:"custom": true,使用自定义的tabbar 2. 将非tabbar的内容删除,删除的示例是发布,如下: "tabBar": {

微信小程序之自定义toast弹窗

微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的:但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了: 第一步:新建一个wxml文件用来装模板,方便以后使用,比如 然后在这里面添加模板代码 <template name="toast"> //nam

在微信小程序里自动获得当前手机所在的经纬度并转换成地址

效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置: 具体步骤: 1. 使用微信jssdk提供的getLocation API拿到经纬度: 2. 调用高德地图的api使用经纬度去换取地址的文字描述. wx.ready(() => { wx.getLocation({ type: "gcj02", success: function(res) { var location = "&location=" + res.longitude + &q