Javascript 在画布中为草地提供运动

我创建了一个草场，它是几个小的60x36图像的组合。引入一个草对象，然后在画布上绘制。现在我想给它运动。连续滚动效果。我为它编写了一个代码，但它不工作（图像（草场）没有沿着画布的宽度滚动，这是这个脚本的目标。我没有在js中使用oop。对我所犯的错误进行一点讨论会很好

（我使用的图像已添加到帖子中）

函数makeit（）{
var canvas=document.getElementById（“mycanvas”）；
var ctx=canvas.getContext（'2d'）；
var高度=500-36；
var xpos=[]；
var img=新图像（）；
img.src=“grass.jpg”；
画布（）；
函数drawcanvas（）{
画布宽度=600；
帆布。高度=500；
canvas.style.border=“1px纯黑”；
}
对于（i=0；i，本质上，您只需要创建一个图像模式，然后将其转换并绘制到屏幕上

假设已加载图像的示例：

var ph = img.height;                                // pattern height
var w = canvas.width;                               // width of canvas/scoll area
var h = canvas.height;                              // used to calculate y pos.
var x = 0;                                          // scroll position
ctx.fillStyle = ctx.createPattern(img, 'repeat-x'); // pattern

然后在循环中滚动草地：

function scroll() {

    ctx.translate(x, h - ph);      // translate to next position
    ctx.fillRect(-x, 0, w, ph);    // fill rectangle (fillstyle = pattern)
    ctx.translate(-x, -(h -ph));   // translate back for other operations

    x--;                           // scroll speed (here 1 pixel / frame)

    requestAnimationFrame(scroll); // loop
}


图案填充定位到坐标系，这就是为什么需要平移的原因。在平移时，我们还使用相反方向的绘制位置进行补偿。这将使图案填充到相同位置，但偏移量可变，从而创建动画效果

请注意，如果更改fillStyle，则需要将模式存储在一个变量中并重新初始化填充样式。如果循环长期运行，还需要限制x，以使其不会溢出。这可以使用
w
作为条件（或模）将x重置为0。
请定义“不工作”。你需要给潜在的回答者尽可能多的帮助！效果很好。实际上我想创建对象，然后制作动画。事实上，主要目的是学习oop。无论如何，谢谢：）
function scroll() {

    ctx.translate(x, h - ph);      // translate to next position
    ctx.fillRect(-x, 0, w, ph);    // fill rectangle (fillstyle = pattern)
    ctx.translate(-x, -(h -ph));   // translate back for other operations

    x--;                           // scroll speed (here 1 pixel / frame)

    requestAnimationFrame(scroll); // loop
}