免费报名小程序_微信小程序canvas截取任意形状的

2021-01-06 15:43

微信小程序canvas截取任意形状的实现代码       这篇文章主要介绍了微信小程序canvas截取任意形状的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

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

比如:

代码

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




扫描二维码分享到微信

在线咨询
联系电话

020-66889888