var canvas = document.getElementById("canvas");
var canvasW = 800;
var canvasH = 600;
canvas.width = canvasW;
canvas.height = canvasH;
//定义一个对象来存放裁剪区域的参数，即绘制圆需要的参数
var objOptions={x:20, y:30, r:40};
var ctx = canvas.getContext("2d");
//绘制图像
var imgmy = new Image();
imgmy.src = "piaohz.jpg";
//当图片加载完成后开始绘制canvas
imgmy.onload = function () {
    initCanvas();
}
function initCanvas() {
    draw(imgmy,objOptions);
}
//绘制剪辑区域
function clipMy(o){
    ctx.beginPath();
    ctx.arc(o.x,o.y,o.r,0,2*Math.PI,false);
    ctx.clip();
    //console.log(o.x);
}
//整个画布绘制的整体过程
function draw(myimg,objopt) {
    //清空画布
    ctx.clearRect(0,0,canvas.width,canvas.height);
    //保存当前状态
    ctx.save();
    //执行裁剪函数
    clipMy(objopt);
    //绘制图像
    ctx.drawImage(myimg, 0, 0);
    //重置状态
    ctx.restore();
}