微信小程序canvas截取任意形状的实现代码
最近在研究拼图验证码实现，需要对图片的部分模块进行特殊形状切割出一小块，明白后原来是如此简单，第一步就是将所有绘制的形状用线勾出（直线、弧线、贝塞尔曲线都可以）形成闭环，第二步就是切割绘制，第二步不麻烦，麻烦的只是第一步，需要一些计算，所以会在以后，尽力的多保存一些特殊形状的方法。
比如：
代码
drawPic(x,y,r){
//constctxBackground=wx.createCanvasContext('canvasBackground')
constctxBackground=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截取任意形状的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。