canvas應用——將方形圖片處理為圓形

上段時間在項目中需要將方形圖片處理為圓形圖片，你可能會說直接用css設置border-radius: 50%就可以了，但是項目中還要將此圖片的圓形圖片作為一部分利用canvas將其繪制到一張背景圖上面，所以就有了為何要用canvas來處理了。

代碼示例：

//canvas 加載圖圓形處理
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
//加載圖片
var img = new Image();
img.onload = function () {
    var width = img.width;
    var height = img.height;
    var circle = {
        x: width / 2,
        y: height / 2,
        r: width / 2
    }
    ctx.clearRect(0, 0, width, height);
    //開始路徑畫圓,剪切處理
    ctx.save();
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
    ctx.clip(); //剪切路徑
    ctx.drawImage(img, 0, 0);
    //恢復狀態
    ctx.restore();
}
img.src = 'https://wx.qlogo.cn/mmopen/vi_32/eANbKH1RvLW088qRtM96QLWWkgysk4T2TErm4F0lHcnhu2txL6Kk0PJokrxT4TLUmEtAZ2xqtxwTRIPWoZZ9RQ/132';

顯示結果：

 

更多：

Canvas保存圖片保存到本地

Canvas模糊化處理圖片、毛玻璃處理圖片之stackblur.js

網頁中實現圖片的毛玻璃效果