html 图片跟着滚动条移动,canvas 图片根据滚动条上下移动

copyright

var width = document.getElementById('canvas-parent').offsetWidth;

var height = document.getElementById('canvas-parent').offsetHeight;

var myheight = $(".harm-03").offset().top;

var myCanvas = document.getElementById('person');

var context = myCanvas.getContext('2d');

var image = new Image();

var picSizeX = 66;

var picSizeY = 180;

var getWindowWidth = $(window).width();

var imgY = 0;

var imgX = (width/2-picSizeX/2);

window.onload = function (){

myCanvas.width=width;

myCanvas.height=height;

image.src = 'images/boy.png';

image.onload = function () {

drawImageByLocation(imgX,imgY);

$(window).scroll(function(event){

var wScrollY = window.scrollY;

if(wScrollY - myheight > 0 && wScrollY < (myheight+height-40)){

drawImageByLocation(imgX,wScrollY-myheight);

}

});

}

function drawImageByLocation(x,y) {

context.clearRect(0,0,myCanvas.width,myCanvas.height);

context.drawImage(image,0,0,66,180,x,y,picSizeX,picSizeY);

}

}

现看现写的一个小demo，用position：fixed一样可以实现，判断一下滚动条的高度即可。