Clip性能问题

来源:3-4 离屏Canvas 使用剪辑区域优化

沉谙

2017-07-28 10:22

我这里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();

	}
}


写回答 关注

1回答

  • qq_疯狂的蜗牛_1
    2017-11-02 14:59:55

    context.clearRect(0,0,canvas.width,canvas.height);每次点击之后你是不是没有重新来绘制canvas,没有清空呢?

Canvas玩转图像处理

canvas系列第三课,学会编写图像算法,一起玩转图像处理吧

60311 学习 · 124 问题

查看课程

相似问题