小程序画布图片切圆角

最新推荐文章于 2024-03-23 21:04:27 发布

李湘湘

最新推荐文章于 2024-03-23 21:04:27 发布

阅读量300

点赞数

分类专栏：小程序海报文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_40255459/article/details/128972212

版权

小程序海报专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图片，矩形都可用（兼容苹果，安卓）

roundRect1(ctx, bg_x, bg_y, bg_w, bg_h, bg_r) {
    // 开始绘制
    ctx.beginPath();
    //bg_x 图片的x坐标
    //  图片的y坐标bg_y
    //  图片宽度bg_w
    //  图片高度bg_h
    // 图片圆角bg_r
    ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI * 1.5);
    ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2);
    ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5);
    ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI);
  },
  //调用方法
  ctx.save()
      this.roundRect1(ctx, 15,  28, 105, 105, 8)
      ctx.clip()
      ctx.restore()

只切图片圆角（兼容苹果，安卓）

  roundRect(ctx,img,bg_x, bg_y, bg_w, bg_h, bg_r) {
    // ctx要操作的画布,bg_x：x轴距离，bg_y:y轴距离,bg_w：图片宽度，bg_h：图片高度，bg_r：圆角弧度
    // img图片路径
    ctx.save();
    // 开始绘制
    ctx.beginPath();//开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
    ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI * 1.5);
    ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2);
    ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5);
    ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI);
    ctx.clip();
    ctx.drawImage(img, bg_x, bg_y, bg_w, bg_h);
    // 恢复之前保存的绘图上下文
    ctx.restore();
  },
  //调用
  this.roundRect(ctx'图片路径', 15, 28, 105, 105, 8)