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();
}