圖片裁剪-內凹圓形

最近作了一個好玩的東西，分享給你們。

有一個需求，就是要把圖片兩側裁剪成向內凹的圓形（如圖），而且兩側凹處不能遮擋背景。

預覽地址：demo.dyrily.cn/bendImage/

對於這種異形的圖片，css貌似有點棘手。因而乎，祭出神器：canvas。

這個需求的難點在於如何讓裁剪的圓弧經過固定的點，也就是圖片邊角。

這裏用的方法是勾股定理來計算裁剪圓的半徑。

/**
 * @param canvas element元素
 * @param option
 *      width       canvas的寬
 *      height      canvas的高
 *      url         裁剪圖片的連接
 *      distance    內凹的距離
 */
function bendImage(canvas, option) {
    canvas.width = option.width;
    canvas.height = option.height;
    var ctx = canvas.getContext('2d');
    // 經過勾股定理化簡後的表達式
    var radius = (option.distance + Math.pow(option.height, 2) / option.distance / 4) / 2;
    var image;
    if (bendImage.image && bendImage.image.src === option.url) {
        image = bendImage.image;
        draw();
        return;
    }
    image = new Image();
    image.src = option.url;
    image.onload = function () {
        bendImage.image = image;
        draw();
    };

    function draw() {
        ctx.drawImage(image, 0, 0, option.width, option.height);
        ctx.globalCompositeOperation = 'destination-out';
        ctx.arc(option.distance - radius, option.height / 2, radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.arc(option.width + radius - option.distance, option.height / 2, radius, 0, Math.PI * 2);
        ctx.fill();
    }
}
複製代碼

原創文章，轉載註明出處，感謝。