最近在研究拼图验证码实现,需要对图片的部分模块进行特殊形状切割出一小块,明白后原来是如此简单,第一步就是将所有绘制的形状用线勾出(直线、弧线、贝塞尔曲线都可以)形成闭环,第二步就是切割绘制,第二步不麻烦,麻烦的只是第一步,需要一些计算,所以会在以后,尽力的多保存一些特殊形状的方法。
比如:
代码
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开发实例及注意事项,包括了微信小程序 canvas开发实例及注意事项的使用技巧和注意事项,需要的朋友参考一下 微信小程序 wxcanvas 测试手机为IPHONE6,开发者工具版本0.10.102800。开发者工具0.11.112301版本也一样 微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcan
本文向大家介绍微信小程序3D轮播实现代码,包括了微信小程序3D轮播实现代码的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了微信小程序3D轮播实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 效果如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍微信小程序 获取微信OpenId详解及实例代码,包括了微信小程序 获取微信OpenId详解及实例代码的使用技巧和注意事项,需要的朋友参考一下 获取微信OpenId 先获取code 再通过code获取authtoken,从authtoken中取出openid给前台 微信端一定不要忘记设定网页账号中的授权回调页面域名 流程图如下 主要代码 页面js代码 WxCodeServlet代码 W
本文向大家介绍微信小程序 仿猫眼实现实例代码,包括了微信小程序 仿猫眼实现实例代码的使用技巧和注意事项,需要的朋友参考一下 微信小程序仿猫眼 实现效果图: movie.js movie.json movie.wxml movie.wxss 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
本文向大家介绍微信小程序收藏功能的实现代码,包括了微信小程序收藏功能的实现代码的使用技巧和注意事项,需要的朋友参考一下 需求 点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 需要解决的问题 点击收藏后需要显示已收藏,并且文字状态改变 另一个页面如何知道你点击了收藏,并且获得你点击收藏的数据 如何解决? 数据状态绑定,并且由状态控制样式(三元运算符) 缓存(setStorageSync,g
本文向大家介绍微信小程序实现禁止分享代码实例,包括了微信小程序实现禁止分享代码实例的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了微信小程序实现禁止分享代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 微信禁止分享 添加以下代码到网页中即可 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。