canvas的图片随着窗口向下滚动缩放

Question

canvas图片实现自适应

$('.container').prepend(canvas);
// 创建图片
let src = $(".image-hero-swimmer").css("background-image").split("\"")[1];
console.log(src,'src');

let imageObj = new Image();
imageObj.src = src;
imageObj.addEventListener('load', () => {
    canvas.style.width = window.innerWidth+'px';
    canvas.style.height = window.innerHeight+'px';
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);

  })
  // 调整窗口重新画图
  $(window).resize(resizeCanvas);
  function resizeCanvas() {
    draw_canvas_image();
};

canvas图片向下滚动缩放

function draw_canvas_image(h,direct) {
    let src = $(".image-hero-swimmer").css("background-image").split("\"")[1];
    let imageObj = new Image();
    imageObj.src = src;
    canvas.style.width =  window.innerWidth+'px';
    canvas.style.height =  window.innerHeight+'px';
    if(direct =='down'){
        var h = --window.innerHeight;
        var nWidth= parseInt(canvas.style.width);
        var nHeight= parseInt(canvas.style.height);
        canvas.style.height = h+'px';
    }
    if(direct == 'up') {
        var h = ++window.innerHeight;
        var nWidth= parseInt(canvas.style.width);
        var nHeight= parseInt(canvas.style.height);
        // canvas.style.width = w+'px';
        canvas.style.height = h+'px';
        if( nHeight > window.innerHeight){
            canvas.style.height = window.innerHeight+'px';
        }
    }
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);

}

现在的缩放效果很差，参考了这个https://www.apple.com/apple-w... 他的canvas实现是没有改变宽高，想请教下有这种向下滚动缩放canvas是用的什么方式

Answer 1

向下滚动窗口大小不变啊，window.innerWidth,window.innerHeight不变，
增加滚动监听：
document.addEventListener('scroll',winScroll,false);

通过winScroll函数，根据window.scrollY来处理canvas的大小。

其实用background-size控制更简单。。。。

Answer 2

apple-watch-series这个canvas窗口滚动缩放实现难度太大，放弃了