微信小程序canvas绘制圆形图片

canvas基础知识补齐一下,明白了原理便很简单。canvas

  1. 先使用.arc绘制一个圆圈,经过.clip裁剪,绘制在圆圈内的内容会出现,其余的都会隐藏。
  2. .drawImage的绘制位置是相对原画布,而不是圆圈,这个不知道的画很坑啊。只要绘制图片的位置再圆圈内便会出现。
//保存上文
targetCtx.save()
targetCtx.beginPath()
targetCtx.arc(110, 60, 30, 0, 2 * Math.PI)	//绘制圆圈
targetCtx.clip()	//裁剪
targetCtx.drawImage("/image/111.jpg",80,30,60,60)	//定位在圆圈范围内便会出现
targetCtx.restore()
//恢复上文内容,绘制其余
targetCtx.draw();
复制代码
相关文章
相关标签/搜索