微信小程序 画布arc截取圆形图片
Posted dongzhi1111
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 画布arc截取圆形图片相关的知识,希望对你有一定的参考价值。
画布提供了一种可以创建圆的方法
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截取圆形图片的主要内容,如果未能解决你的问题,请参考以下文章
微信小程序 base64 图片 canvas 画布 drawImage 实现
微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)