当前位置 主页 > 网站技术 > 代码类 >

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

    栏目:代码类 时间:2020-01-13 18:10

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

    比如:

    代码

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

stage/:nmap的理解与利用(初级) 琴水玉:响应式编程库RxJava初探 CallmeJust:从一个面试官的角度谈软件工程师的面试 小创:React 入门-redux 和 react-redux Mr-Tsing:Redis-第五章节-8种数据类型 leesf:Lakehouse: 统一数据仓库和高级分析的新一代开放平台 嵌入式与Linux那些事:程序员如何写一份合格的简历?(附简历模 zzssdd2:QT串口助手(三):数据接收 NeilZhang:对“微信十年产品思考”的思考 r1chard:一种获取context中keys和values的高效方法 | golang 详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式 详解如何修改jupyter notebook的默认目录和默认浏览器 SpringBoot2.0集成WebSocket实现后台向前端推送信息 详解springboot集成websocket的两种实现方式 使用numpngw和matplotlib生成png动画的示例代码 c语言程序从哪里开始执行 c++清屏函数是什么 c++中不能重载的运算符有哪些 企业需谨防域名被抢注 互联网时代创业 价值共创时代 linux远程拷贝文件命令rcp,远程文件复制 linux远程拷贝文件夹命令, scp远程拷贝文件及文件夹写法 linux远程拷贝文件断点续传(linux限速和断点续传) linux远程拷贝文件到本地命令(复制远程主机上的文件到本地) linux远程拷贝文件到本地命令及用法 利用Python函数实现一个万历表完整示例 Python字符串对齐、删除字符串不需要的内容以及格式化打印字符 Java中ArrayList集合的常用方法大全 一个简单的Spring容器初始化流程详解 js简单粗暴的发布订阅示例代码