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

微信(小程序)  /  管理员 发布于 5年前   302

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

比如：

代码

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截取任意形状的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• 微信小程序canvas.drawImage完全显示图片问题的解决
• 详解微信小程序canvas圆角矩形的绘制的方法
• 微信小程序利用canvas 绘制幸运大转盘功能
• 微信小程序canvas写字板效果及实例
• 微信小程序小组件 基于Canvas实现直播点赞气泡效果
• 微信小程序 canvas开发实例及注意事项
• 微信小程序 wxapp画布 canvas详细介绍