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();
}
根本就没错,只是剪裁的圆的参数xy轴改一下就出来了!!!!!好坑爹啊