微信小程序—canvas截取任意形状

最新推荐文章于 2023-09-09 21:37:27 发布

玩烂小程序

最新推荐文章于 2023-09-09 21:37:27 发布

阅读量1.8k

点赞数 3

分类专栏：微信小程序文章标签：小程序 canvas 贝塞尔曲线

本文链接：https://blog.csdn.net/WeiHan_Seven/article/details/103939826

版权

微信小程序专栏收录该内容

51 篇文章 19 订阅

订阅专栏

最近在研究拼图验证码实现，需要对图片的部分模块进行特殊形状切割出一小块，明白后原来是如此简单，第一步就是将所有绘制的形状用线勾出（直线、弧线、贝塞尔曲线都可以）形成闭环，第二步就是切割绘制，第二步不麻烦，麻烦的只是第一步，需要一些计算，所以会在以后，尽力的多保存一些特殊形状的方法。
比如：在这里插入图片描述

代码

drawPic(x,y,r){
    // const ctxBackground = wx.createCanvasContext('canvasBackground')
    const ctxBackground = wx.createCanvasContext('canvasBackground')
    ctxBackground.save();
    //开始一个新的绘制路径
    ctxBackground.beginPath();
    //设置路径起点坐标
    ctxBackground.moveTo(x, y);
    ctxBackground.arcTo(x, y - r, x + r, y - r, r);
    ctxBackground.lineTo(x + 2 * r, y - r);
    ctxBackground.arcTo(x + 2 * r, y - 2 * r, x + 3 * r, y - 2 * r, r);
    ctxBackground.arcTo(x + 4 * r, y - 2 * r, x + 4 * r, y - r, r);
    ctxBackground.lineTo(x + 5 * r, y - r);
    ctxBackground.arcTo(x + 6 * r, y - r, x + 6 * r, y, r);
    ctxBackground.lineTo(x + 6 * r, y + r);
    ctxBackground.arcTo(x + 7 * r, y + r, x + 7 * r, y + 2 * r, r);
    ctxBackground.arcTo(x + 7 * r, y + 3 * r, x + 6 * r, y + 3 * r, r);
    ctxBackground.lineTo(x + 6 * r, y + 4 * r);
    ctxBackground.arcTo(x + 6 * r, y + 5 * r, x + 5 * r, y + 5 * r, r);
    ctxBackground.lineTo(x + 4 * r, y + 5 * r);
    ctxBackground.arcTo(x + 4 * r, y + 4 * r, x + 3 * r, y + 4 * r, r);
    ctxBackground.arcTo(x + 2 * r, y + 4 * r, x + 2 * r, y + 5 * r, r);
    ctxBackground.lineTo(x + r, y + 5 * r);
    ctxBackground.arcTo(x, y + 5 * r, x, y + 4 * r, r);
    ctxBackground.lineTo(x, y + 3 * r);
    ctxBackground.arcTo(x + r, y + 3 * r, x + r, y + 2 * r, r);
    ctxBackground.arcTo(x + r, y + r, x, y + r, r);
    ctxBackground.lineTo(x, y);
    //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
    ctxBackground.closePath();
    ctxBackground.clip();
    ctxBackground.stroke(); //画线轮廓
    wx.getImageInfo({
      src: 'cloud://normal-env/000060.jpg',
      success: function (res) {
        ctxBackground.drawImage(res.path, 0, 0, 256, 191);
        ctxBackground.restore();
        ctxBackground.draw();
      }
    })
  }