微信小程序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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
vue cli 全面解析
Feb 28 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
js实现左右轮播图
Jan 09 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
php中的MVC模式运用技巧
2007/05/03 PHP
中英文字符串翻转函数
2008/12/09 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
解析isset与is_null的区别
2013/08/09 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
js比较日期大小的方法
2015/05/12 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
如何使用Python 打印各种三角形
2019/06/28 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
倩碧英国官网:Clinique英国
2018/08/10 全球购物
应届大学生自荐信格式
2013/09/21 职场文书
经济信息管理专业大学生求职信
2013/09/27 职场文书
平面设计自荐信
2013/10/07 职场文书
团日活动策划书
2014/02/01 职场文书
初中语文教学反思
2014/02/02 职场文书
运动会稿件100字
2014/02/21 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android