Question

我已经创建了一个草地，它是几个小的60x36图像的组合。引入草对象然后在画布上绘制。现在我想给它动作。连续滚动效果。我为它制作了一个代码并且它不起作用（图像（草地）不沿着画布的宽度滚动，这是该剧本的目标）。我在js中没有与oop一起工作。关于我所犯错误的一点讨论会很棒

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

enter image description here

<html>
<body>
<canvas id="mycanvas"></canvas>
<script>
function makeit(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext('2d');
var height=500-36;
var xpos=[];
var img=new Image();
img.src="grass.jpg";
drawcanvas();
function drawcanvas(){
canvas.width=600;
canvas.height=500;
canvas.style.border="1px solid black";
}
for(i=0;i<10;i++){
xpos.push(i*60);

}

var grass=function(x,y){
this.x=x;
this.y=y;
this.img=img;
ctx.drawImage(this.img,this.x,this.y);

}
grass.prototype.motion=function(){
for(i=0;i<xpos.length;i++){
xpos[i]--;
if(xpos[i]<=-60){
xpos[i]=canvas.width;
}
 ctx.drawImage(this.img,this.x,this.y);
}
}

for(i=0;i<xpos.length;i++){

var grass1=new grass(xpos[i],height);

}
var m=setTimeout(function(){
for(i=0;i<xpos.length;i++){
grass1.motion();
}
},1000);


}
window.onload=makeit;
</script>
</body>
</html>

绘制所有图像后的

实际画布

enter image description here

Answer 1

从本质上讲，您只需要创建一个图像模式然后翻译并将其绘制到屏幕上。

假设已加载图片的示例：

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
}

<强> FIDDLE

图案填充固定在坐标系上，这就是翻译是必要的原因。当我们翻译时，我们也使用相反方向的绘制位置来补偿它。这将使图案填充到相同的位置，但是在一个可变的偏移处，这会产生动画效果。

请注意，如果更改fillStyle，则需要将模式存储在变量中并重新初始化填充样式。如果循环长时间运行也限制x，因此它不会溢出。这可以使用w作为条件（或模数）将x重置为0来完成。

在画布上给草地运动

1 个答案: