HTML5 Canvas：扣圆图（扣圆头像）

HTML示例：

<canvas id="canvas" style="width:400;height:300"></canvas>

JS示例：

var context = document.getElementById("canvas").getContext("2d");

var img = new Image;
// 获取图片地址
img.src = "/background.jpg";
// 开启跨域支持
img.crossOrigin = "*";

img.onload = function() {
    context.beginPath();
    // 绘制圆，参数（x坐标，y坐标，圆半径，起始角度，终止角度）
    context.arc(0, 0, 40, 0, 2*Math.PI);
    context.save();
    // 剪切形状
    context.clip();

    // 绘制头像，参数（图片资源，x坐标，y坐标，宽度，高度）
    context.drawImage(img, 0, 0, 80, 80);
    context.restore();
    context.closePath();
}