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


Posted in Javascript onJanuary 13, 2020

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

比如:

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

Javascript 相关文章推荐
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
javaScript中的空值和假值
Dec 18 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
js实现列表向上无限滚动
Jan 13 #Javascript
vue 组件销毁并重置的实现
Jan 13 #Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 #Javascript
微信小程序聊天功能的示例代码
Jan 13 #Javascript
js实现适配移动端的拖动效果
Jan 13 #Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 #Javascript
优化Vue中date format的性能详解
Jan 13 #Javascript
You might like
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
通过html表格发电子邮件
2006/10/09 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
Python模拟登陆实现代码
2017/06/14 Python
python之消除前缀重命名的方法
2018/10/21 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
火车的故事教学反思
2014/02/11 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
考核评语大全
2014/04/29 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
辞职书格式样本
2015/02/26 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Mysql binlog日志文件过大的解决
2021/10/05 MySQL