我这里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(); } }
context.clearRect(0,0,canvas.width,canvas.height);每次点击之后你是不是没有重新来绘制canvas,没有清空呢?