当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序canvas截取任意形状的实现代码

微信小程序canvas截取任意形状的实现代码

2020年03月09日  | 移动技术网IT编程  | 我要评论

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

比如：

代码

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();
   }
  })
 }

总结

以上所述是小编给大家介绍的微信小程序canvas截取任意形状的实现代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网