画布提供了一种可以创建圆的方法

arc(x, y, r, s, e, counterclockwise)

  • x,y:圆心
  • r:圆的半径
  • s:起始弧度 (0)
  • e:终止弧度 (1.5 * Math.PI)
  • counterclockwise:弧度的方向是否是逆时针

原图              截取之后的图

                    

首先确定图片位置x和y值,然后确定图片大小,r就为图片一半,因为图片起始点是(x,y),所以圆心的位置为(x+r,y+r)

var headpic ='../../../images/tabBar_two/dynamic.png';
ctx.beginPath()
ctx.arc(20+60, 20+60, 60, 0, 2 * Math.PI);
ctx.fill();
ctx.clip() //剪切形状
ctx.drawImage(headpic, 20, 20, 120, 120);
ctx.draw();

  

微信小程序 画布arc截取圆形图片的更多相关文章

  1. 微信小程序wxss的background本地图片问题

    在web 或者webapp开发中我们习惯了直接饮用本地图片做背景,例如 .aaa { background: url('img/1.png'); } 但是这种引用方式在微信小程序中是无法使用的,控制台 ...

  2. 微信小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...

  3. [转]微信小程序开发(二)图片上传+服务端接收

    本文转自:http://blog.csdn.net/sk719887916/article/details/54312573 文/YXJ 地址:http://blog.csdn.net/sk71988 ...

  4. 微信小程序使用wxParse,解决图片显示路径问题

    我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径, ...

  5. 微信小程序富文本中的图片大小超出屏幕

    这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi,   '& ...

  6. 入坑微信小程序必经之路(六)图片上传服务器——WebSercice接口

    wxml文件 <view class="weui-uploader"> <view class="img-v weui-uploader__bd&quo ...

  7. 微信小程序 画布drawImage实现图片截取

    大多数图片都大小不一,选择框的尺寸也是宽高相等的,就会有图片被压缩 解决方法: 1.可以使用画布对图片先进行截取,保存截取图片(用户自己选取,或者指定图片中心区域截取),但是对于多张图片手动截取,会影 ...

  8. 微信小程序画布(1)

    wxml: <view  catchtouchmove="preventTouchMove" wx:if="{{canvas_haoBao}}"> ...

  9. 微信小程序-画布组件

    canvas 画布. 注: canvas 标签默认宽度300px.高度225px 同一页面中的 canvas-id 不可重复,如果使用一个已经出现过的 canvas-id,该 canvas 标签对应的 ...

随机推荐

  1. 异常的jvm(java虚拟机)与异常处理try catch与throwable

  2. 如何隐藏php和apache头信息

    去掉 X-Powered-By 只需要修改php.ini 中 expose_php = On 改成expose_php = Off 隐藏 Apache 版本信息,修改/etc/httpd/conf/h ...

  3. Computational Complexity of Fibonacci Sequence / 斐波那契数列的时空复杂度

    Fibonacci Sequence 维基百科 \(F(n) = F(n-1)+F(n-2)\),其中 \(F(0)=0, F(1)=1\),即该数列由 0 和 1 开始,之后的数字由相邻的前两项相加 ...

  4. 《JavaScript高级程序设计》读书笔记(四)变量、作用域和内存问题

    内容---理解基本类型和引用类型的值---理解执行环境---理解垃圾收集 --JavaScript变量松散类型的本质--决定了它只是在特定时间用于保存特定值的一个名字而已--变量的值及其数据类型可以在 ...

  5. C:数值溢出问题

    当超过一个数据类型能够存放最大的范围时,数值会溢出. 有符号位最高位溢出的区别:符号位溢出会导致数的正负发生改变,但最高位的溢出会导致最高位丢失. #include <stdio.h> i ...

  6. C:sizeof 运算符

    sizeof不是函数,所以不需要包含任何头文件,它的功能是计算一个数据类型的大小,单位为字节 sizeof的返回值为size_t size_t类型在32位操作系统下是unsigned int,是一个无 ...

  7. ubuntu-查看所有用户

    cat /etc/shadow :后面的全是用户

  8. 关于永久POE

    1.传统POE 在我们的企业网络中,经常会使用交换机给IP电话或者无线AP供电,以使得其正常的工作. 正常情况下,我们都知道,普通的POE是在PSE交换机启动完成后,然后再给PD(Power Devi ...

  9. 路由器安全-FPM

    1.FPM(也叫NGACL) FPM是Cisco IOS新一代的ACL,叫做Flexible Packet Matching,灵活的包匹配. 根据任意条件,无状态的匹配数据包的头部,负载,或者全部. ...

  10. ConcurrentHashMap 实现缓存类

    参考:https://blog.csdn.net/woshilijiuyi/article/details/81335497 在规定时间内,使用 hashMap 实现一个缓存工具类,需要考虑一下几点 ...