在變動(dòng)時(shí)添加一些判斷就好了

range.addEventListener('change',function(){//range?=?document.getElementById("range")獲取滑桿
????????????var?sx?=?canvas.width*(1-range.value)/2;//圖片左上角x坐標(biāo)
????????????var?sy?=?canvas.height*(1-range.value)/2;//圖片左上角Y坐標(biāo)
????????????context.clearRect(0,0,canvas.width,canvas.height);//清除context的圖像
????????????context.drawImage(image,sx,sy,canvas.width*range.value,canvas.height*range.value);//重繪圖片
????????????if(range.value<1){???//判斷放大比例是否少于1
????????????????context.drawImage(offsetCanvas,
??????????????????????????????????sx+canvas.width*range.value-offsetCanvas.width,//水印的左上角x值
??????????????????????????????????//sx是圖片的左上角位置，加上圖片右下角的x值就是整個(gè)canvas的左邊界??????????????????????????????????//到圖片的右下角x的總距離，再減去水印自身的x值，就是水印左上角x值
??????????????????????????????????sy+canvas.height*range.value-offsetCanvas.height);//水印的左上角Y值
????????????}else{
????????????????context.drawImage(offsetCanvas,
??????????????????????????????????canvas.width-offsetCanvas.width,
??????????????????????????????????canvas.height-offsetCanvas.height);
????????????}