个回答

• Q版的我

  2015-12-18 14:03:05

  在变动时添加一些判断就好了

  range.addEventListener('change',function(){//range = document.getElementById("range")获取滑杆
              var sx = canvas.width*(1-range.value)/2;//图片左上角x坐标
              var sy = canvas.height*(1-range.value)/2;//图片左上角Y坐标
              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值就是整个canvas的左边界                                  //到图片的右下角x的总距离，再减去水印自身的x值，就是水印左上角x值
                                    sy+canvas.height*range.value-offsetCanvas.height);//水印的左上角Y值
              }else{
                  context.drawImage(offsetCanvas,
                                    canvas.width-offsetCanvas.width,
                                    canvas.height-offsetCanvas.height);
              }

  
  

  0