微信小程序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如何截取任意形状”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
标题名称:微信小程序canvas如何截取任意形状
网页URL:http://myzitong.com/article/jceodd.html