                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas玩转图像处理

Clip性能问题

我这里clip使用后存在性能问题，不知道为何，clip前后上下文状态我也存贮并且恢复了的，页面刚打开时，很流畅，多点几次，慢慢的就会变的有点儿卡顿

下面是放大镜绘制

function drawEnlarge(isShow, x, y) {
	drawImg();
	if (isShow) {
		var sx = x / CAN_WIDTH * img.width - OFF_WIDTH/2 * OFF_SCALE;
		var sy = y / CAN_HEIGHT * img.height - OFF_HEIGHT/2 * OFF_SCALE;
		var sw = OFF_WIDTH * OFF_SCALE;
		var sh = OFF_HEIGHT * OFF_SCALE;

		ctx_off.save();
		ctx_off.strokeStyle = '#3969c4'
		ctx_off.strokeWidth = 3;
		ctx_off.arc(OFF_WIDTH/2,OFF_HEIGHT/2,OFF_WIDTH/2,0,2*Math.PI);
		ctx_off.stroke();
		ctx_off.clip();
		ctx_off.drawImage(img,sx,sy,sw,sh,0,0,OFF_WIDTH,OFF_HEIGHT);
		ctx.drawImage(can_off,x-OFF_WIDTH/2,y-OFF_HEIGHT/2,OFF_WIDTH,OFF_HEIGHT);
		ctx_off.restore();

	}
}