• <noscript id="e0iig"><kbd id="e0iig"></kbd></noscript>
  • <td id="e0iig"></td>
  • <option id="e0iig"></option>
  • <noscript id="e0iig"><source id="e0iig"></source></noscript>
  • 微信小程序—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();
          }
        })
      }
    

    體驗

    在這里插入圖片描述

    版權聲明:本文為WeiHan_Seven原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接和本聲明。
    本文鏈接:https://blog.csdn.net/WeiHan_Seven/article/details/103939826

    智能推薦

    微信小程序循環渲染canvas動態圖表

    需求:數據驅動圖表渲染,先看效果圖 我們知道,微信小程序中是沒有圖表組件的,使用echarts也會有很多問題,比如echarts的圖表總是在屏幕最上層,也就是說,會在導航欄和菜單欄上方,這當然不是我們想要的,所以只能自己畫一個。在這里我選擇用canvas畫。 首先畫一組圖表,數據由data驅動 wxml部分 wxss部分 js部分 效果為: 這樣就能畫出兩個圖表了,但是,我們需要以數據來決定圖表的...

    [leetCode]07.重建二叉樹

    遞歸 前序遍歷為:| 根結點 | 左子樹 | 右子樹 | 中序遍歷為:| 左子樹 | 根結點 | 右子樹 | 以前序遍歷中的根節點到中序遍歷中尋找根節點,這樣就能知道左右子樹的長度。左右子樹有符合相同的查找模式,所以可以使用遞歸。 上面的代碼使用了指針。可以通過哈希表記錄中序遍歷中根結點的索引,這樣就能快速找到前序遍歷中的根結點在中序遍歷的位置 迭代 leetCode官方題解...

    Python網絡爬蟲之BeautifulSoup庫

    Python網絡爬蟲之BeautifulSoup庫 BeautifulSoup是Python的第三方庫,可以對HTML和XML格式的內容進行解析,并且提取其中的相關信息。BS可以對被提供的任何格式的內容進行爬取,并且進行樹形解析。 1.BeautifulSoup庫的安裝 它的安裝也可以利用pip命令。首先使用管理員權限啟動cmd命令臺,然后使用以下命令進行安裝。 如果提示安裝錯誤,請檢查在Pyth...

    設計模式之適配器模式

    現實生活中一些適配器例子 例題:用火雞冒充鴨子 適配器模式原理: 適配器模式:將一個類的接口轉換成另一種接口.讓原本接口不兼容的類可以兼容. 從用戶的角度看不到被適配者,是解耦的 用戶調用適配器轉化出來的目標接口方法 適配器再調用被適配者的相關接口方法 用戶收到反饋結果,感覺只是和目標接口交互 對象適配器 類適配器 類適配器:通過多重繼承目標接口和被適配者類方式來實現適配 多重繼承,其中繼承的目標...

    vue將BaiduMap引入(組件引入),顯示位置信息

    效果如下: 注意:如果只引用部分BaiduMap,API寫的是引用vue-baidu-map的“map/Map.vue",但是引用maker,label等就不能這樣寫,他們用的是overlays文件下的內容,所以可以直接像上述寫法一樣引入。 關于BMap的undefined問題也是注意使用handler方法將對象獲取,如果還要實現定位可以使用GeoLocation等方法。關于...

    猜你喜歡

    小鑫的JAVA之路(2):JAVA基礎語法(1)

    數據類型 JAVA是強類型語言,對于每一種數據都定義了具體的數據類型 數據類型又分為基本數據類型和引用數據類型 基本數據類型:他所定義的變量是數據值,直接存儲在堆內存中(堆內存以后會講到)所以基本數據類型所定義的變量不是對象,但是在JAVA API中提供了基本數據類型的對象也就是俗稱的包裝類,例如 int類型的包裝類就是Integer。 引用數據類型:他所定義的變量是數據值的引用地址,通常存儲在棧...

    Linux基于rhel的DNS部署(二)——正向解析、反向解析、雙向解析

    一、正向解析(域名轉換為IP地址) 服務端 1、編輯主配置文件 2、編輯zone文件 3、復制模板,編輯A記錄文件 4、重啟named服務 、關閉防火墻 客戶端 1、編輯nameserver 2、測試 注意: 86400 是指 ttl ( time to live ,暫存時間),表示這次請求會在服務器上保存多久時間(單位:秒) A 指的是 Address ,即 IP 地址 IN 是固定關鍵詞 NS...

    Hadoop Yarn 高可用配置時的錯誤解決辦法

    找不到或無法加載主類 org.apache.hadoop.mapreduce.v2.app.MRAppMaster 配置Yarn ResourceManager 高可用時,遇到了一個坑。 找不到或無法加載主類 org.apache.hadoop.mapreduce.v2.app.MRAppMaster 參考了網上各種解決辦法,運行演示程序 cd $HADOOP_HOME/share/hadoop/...

    使用IDEA學習Struts2框架 (一)Struts2入門-HelloWorld應用

    作為一個剛學習完JavaWeb必要儲備知識的人,早已經急不可耐地想要學習運用MVC設計模式的Web框架了。目前Java的三大框架仍然是ssh(Struts、Spring、Hibernate),而struts2對于struts1的一些缺點進行了改進,那么本著了解MVC設計模式和基礎web框架學習的目的,開始學習struts2。開發工具IDEA(沒有用過Eclipse,但是已經習慣了IDEA,就不改了...

    idea mybatis****生成代碼方法及問題解決

    步驟 一. pom文件中添加插件 二. 添加配置文件 在src/main/resources 目錄下建立兩個文件generator.properties 和 generatorConfig.xml,目錄結構如下: 配置文件內容如下: generator.properties: generatorConfig.xml 三. 設置啟動,依次按圖片操作 apply ok! 操作成功,代碼生成。 <...

    精品国产乱码久久久久久蜜桃不卡