微信小程序canvas实现画圆圈头像

darwAvatarArc: function(ctx, src, x, y, w, h = w){

    /*

      ctx: 画布对象

      src: 头像缓存路径

      x: 头像起始位置 横坐标

      y: 头像起始位置 纵坐标

      w: 头像宽度

      h: 头像高度,不传为w

    */

    // 保存绘图上下文。

    ctx.save();

    // 开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

    ctx.beginPath()

    // 设创建一个圆可以指定 起始弧度为 0,终止弧度为 2 * Math.PI。

    // 用 stroke 或者 fill 方法来在 canvas 中画弧线。

    ctx.arc(x+w/2, y+h/2, w/2, 0, Math.PI * 2, false);

    /* 从原始画布中剪切任意形状和尺寸。

    一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(

    不能访问画布上的其他区域)。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存,并在以后的任意时间通过restore方法对其进行恢复。

    */

    ctx.clip()

    // 画头像

    ctx.drawImage(src, x, y, w, h);

    // 恢复之前保存的绘图上下文。

    ctx.restore()

    // 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。

    ctx.draw(true)

  }


小程序代码片段:https://developers.weixin.qq.com/s/z4J5TOmz7Y68

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容