var canvas = document.getElementById("canvas");
var canvasW = 800;
var canvasH = 600;
canvas.width = canvasW;
canvas.height = canvasH;
//定義一個(gè)對(duì)象來(lái)存放裁剪區(qū)域的參數(shù)，即繪制圓需要的參數(shù)
var objOptions={x:20, y:30, r:40};
var ctx = canvas.getContext("2d");
//繪制圖像
var imgmy = new Image();
imgmy.src = "piaohz.jpg";
//當(dāng)圖片加載完成后開(kāi)始繪制canvas
imgmy.onload = function () {
??? initCanvas();
}
function initCanvas() {
??? draw(imgmy,objOptions);
}
//繪制剪輯區(qū)域
function clipMy(o){
??? ctx.beginPath();
??? ctx.arc(o.x,o.y,o.r,0,2*Math.PI,false);
??? ctx.clip();
??? //console.log(o.x);
}
//整個(gè)畫(huà)布繪制的整體過(guò)程
function draw(myimg,objopt) {
??? //清空畫(huà)布
??? ctx.clearRect(0,0,canvas.width,canvas.height);
??? //保存當(dāng)前狀態(tài)
??? ctx.save();
??? //執(zhí)行裁剪函數(shù)
??? clipMy(objopt);
??? //繪制圖像
??? ctx.drawImage(myimg, 0, 0);
??? //重置狀態(tài)
??? ctx.restore();
}