微信小程序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 相关文章推荐
js之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
javascript数组使用调用方法汇总
Dec 08 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
vue实现分页加载效果
2019/12/24 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
Python实例一个类背后发生了什么
2016/02/09 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
python将视频转换为全字符视频
2019/04/26 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
大学新生入学教育方案
2014/05/16 职场文书
运动会1000米加油稿
2015/07/21 职场文书
如何用python插入独创性声明
2021/03/31 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android