page({
// 绘制canvas
drawCanvas:function(){
const ctx = wx.createCanvasContext('poster')
// 画圆形二维码
this.circleImg(ctx,this.data.canvasLotteryQR, 151.5, 535.5, 36) // (canvas对象,二维码图片本地路径(如果是网络图片先用wx.downloadFile存本地),坐标x, 坐标y, 半径)
}, // 圆形图片
circleImg: function (ctx, img, x, y, r){
ctx.save()
var d = 2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore()
},
})

微信小程序 canvas 绘制圆形状的更多相关文章

  1. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  2. 微信小程序 canvas 字体自动换行(支持换行符)

    微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈  https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...

  3. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  4. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

  5. 技术博客--微信小程序canvas实现图片编辑

    技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...

  6. 在微信小程序中绘制图表(part2)

    本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线 相关阅读:在微信小程序中绘制图表(part1)在微信小程序中绘制图表(part3) 关注我的 github 项目 查看完整代码. 确定纵 ...

  7. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  8. 小程序canvas绘制纯色圆角区域 setdata数组某一项

    小程序canvas绘制纯色圆角区域: //方法: roundRectPath:function(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x ...

  9. 【微信小程序canvas】实现小程序手写板用户签名(附代码)

    工作中公司业务需要的微信小程序用户签字功能 先看效果图: wxml: <view class="wrapper"> <view class="handB ...

随机推荐

  1. python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决

    在学习python语言中用json库解析网络数据时,我遇到了两个编译错误:json.decoder.JSONDecodeError: Expecting property name enclosed ...

  2. 依赖注入容器-- Autofac

    目录: 一.简介 二.如何使用 2.1.基本使用 2.2.接口使用 2.3. 其他注入 2.4. 注入的生命周期 一.简介 在上一篇文章中讲到替换默认服务容器,我们选择了Autofac Autofac ...

  3. 多线程学习系列二(使用System.Threading)

    一.什么是System.Threading.Thread?如何使用System.Threading.Thread进行异步操作 System.Threading.Thread:操作系统实现线程并提供各种 ...

  4. 想在京津冀地区找个UI&UE的工作靠啥?看看这篇博客

    文章目的 本篇文章针对京津冀计算机专业应届毕业生,求职UI相关行业,提供数据参考. 本篇文章试用对象 UI相关培训机构 计算机设计相关培训机构 高职专科类学院计算机相关专业 就业参考网站 智联招聘 拉 ...

  5. MyISAM加锁分析

    为什么加锁 你正在读着你喜欢的女孩递给你的信,看到一半的时候,她的好闺蜜过来瞄了一眼(假设她会隐身术,你看不到她),她想把"我很喜欢你"改成"我不喜欢你",刚把 ...

  6. 数据结构与算法(十):红黑树与TreeMap详细解析

    本文目录 一.为什么要创建红黑树这种数据结构 在上篇我们了解了AVL树,既然已经有了AVL这种平衡的二叉排序树,为什么还要有红黑树呢? AVL树通过定义我们知道要求树中每一个结点的左右子树高度差的绝对 ...

  7. js动态数字时钟

    js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...

  8. css公共库——清除浮动

    清除浮动是css的基础,但有时候会忘了一些最简单的东西 浮动因为在文档流之外,所以会造成父元素的坍塌.父元素之后的元素排版就会乱. 常用的方法是在浮动父元素中添加cf类,然后定义cf样式,并将其放在公 ...

  9. java多线程的几种状态

    java线程状态在Thread中定义,源码中能看到有个枚举State,总共定义了六种状态: NEW: 新建状态,线程对象已经创建,但尚未启动 RUNNABLE:就绪状态,可运行状态,调用了线程的sta ...

  10. Postgres全文搜索功能

    当构建一个Web应用时,经常被要求加上搜索功能.其实有时候我们也不知道我要搜索个啥,反正就是要有这个功能.搜索确实很重要的特性,这也是为什么像Elasticsearch和Solr这样基于Lucene的 ...