使用canvas生成一個圓形的圖片
阿新 • • 發佈：2018-12-20
之前發現在網上無法找到相關的內容，找的內容測試也發現有bug。遂，整理思路，自己研究一個可以實現效果的功能。
具體思路就是：首先獲取到圖片的資源，如果使用img載入的，那一定要等img觸發onload以後處理。
我使用的圖片是等寬高的圖片，獲取到圖片資源以後，額外的建立一個canvas，將影象使用drawImage方法畫到畫布上，我們在這個canvas上面處理影象。通過canvas物件的context的createPattern建立一個pattern物件。這個物件不但可以實現重複影象，還可以將我們需要影象資源儲存下來，並且賦值給填充物件fillStyle。
建立好pattern物件後，我們就可以使用clearRect方法，將畫布清空。
然後，進行畫圓操作，使用context的arc方法畫圓。
最後，呼叫fill方法填充即可。
簡單的案例程式碼：
ctx.fillStyle = ctx.createPattern(img, 'no-repeat');
ctx.clearRect(0, 0, num, num);
ctx.arc(r, r, r, 0, Math.PI * 2);
ctx.fill();
canvasCtx.drawImage(pixelCanvas, x - r, y - r, num, num);
由於急著下班，就沒有單獨寫案例，從專案裡面把程式碼拷貝出來顯示一下。
重點就是需要建立一個額外處理影象的canvas，處理好以後就可以將這個canvas的資料使用drawImage方法放到你的canvas裡面了。
完整案例程式碼
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas畫布實現圓形圖片</title> </head> <body> <canvas id="canvas" style="margin: 0 auto; display: block;"></canvas> <canvas id="pixelCanvas"></canvas> </body> <script> var canvas = document.getElementById('canvas'); let img = new Image(); //這裡直接修改圖片的路徑 img.src = "meinv.jpg"; img.onload = function () { canvas.width = img.width; canvas.height = img.height; let ctx = canvas.getContext("2d"); //獲取圖片寬高的最小值 let min = Math.min(img.width, img.height); let r = min/2; ctx.fillStyle = ctx.createPattern(img, 'no-repeat'); ctx.clearRect(0, 0, img.width, img.height); ctx.arc(img.width/2, img.height/2, r, 0, Math.PI * 2); ctx.fill(); }; </script> </html>