这是MDN上面的一个的例子,展现一个自左向右滑动的全景图,例子中采用的图片是一个尺寸大于canvas的图片
代码解释:图片加载完成后,由于图片宽度大于画布的宽度,为X重新赋值,此时x为负数,并为clearX与clearY赋比较大的值,然后间隔执行绘制图片的函数,绘制图片时首先清空画布,根据x的值执行特定的代码,第一次由于x是负数,并不满足判断的条件,只执行ctx.drawImage(img, x, y, imgW, imgH);第二次x的值不断变大,先执行 ctx.drawImage(img, x - imgW + 1, y, imgW, imgH) ,再执行ctx.drawImage(img, x, y, imgW, imgH);
简单的图示