【微信小程序】双缓冲图片滚动，一次循环后图片间出现黑线

本文链接：https://blog.csdn.net/gkzscs/article/details/129690391

文章描述了一个在实现双缓冲图片滚动时遇到的问题，即图片循环滚动后出现黑线间隔。问题的原因是图片尺寸与视口尺寸相等，导致无法无缝衔接。解决方案是调整图片的绘制尺寸，使其略微大于视口尺寸，从而避免黑线的出现。通过修改`draw_with_bigger_v`方法，可以在图片移动时填充额外的空间，消除黑线。

摘要由CSDN通过智能技术生成

双缓冲图片滚动，一个循环后图片间出现黑线

问题描述

使用2张图片精灵，来绘制窗口背景，定时向下滚动。

当图片超出视口时，就将其移动到视口上方，不断重复此过程。

结果发现，当2张图片均经历了一次循环后，图片之间会出现一条黑线间隔。

export class Sprite {
    constructor(img=null, x=0, y=0, w=0, h=0, visible=true) {
        this.img = img 
        this.x = x 
        this.y = y 
        this.w = w 
        this.h = h 
        this.visible = visible
    }

    // 这里是让绘制出的图片刚好与视口尺寸相同
    draw(ctx) {
        ctx.drawImage(this.img, 0, 0, this.img.width, this.img.height, 
            this.x, this.y, this.w, this.h)
    }

    add_y(val) {
        this.y += val 
    }

    move_to(x, y) {
        this.x = x 
        this.y = y 
    }

    out_of_screen() {
        if (this.x+this.w < 0 || this.x > window.innerWidth ||
            this.y+this.h < 0 || this.y > window.innerHeight) {
                return true 
        }

        return false 
    }
}

auto_run_bg() {
        for (let bg of arr_bg.values()) {
            // control the speed of scrolling
            bg.add_y(4)

            if (bg.out_of_screen()) {
                bg.move_to(bg.x, -window.innerHeight)
            }

            // 绘制图片
            bg.draw(ctx)
        }
    }

请添加图片描述

原因

目前是将图片尺寸与视口尺寸保持相同，在图片位置尺寸计算后，无法完全铺满整个视口。

解决方法

让绘制出的图片尺寸，略大于视口尺寸即可。

draw_with_bigger_v(ctx) {
    ctx.drawImage(this.img, 0, 0, this.img.width, this.img.height, 
                this.x, this.y-1, this.w, this.h+2)
}

auto_run_bg() {
  for (let bg of arr_bg.values()) {
    // control the speed of scrolling
    bg.add_y(4)

    if (bg.out_of_screen()) {
      bg.move_to(bg.x, -window.innerHeight)
    }

    // draw more and avoid black line space
    bg.draw_with_bigger_v(ctx)
  }
}