我正在构建一个帆布游戏。在这我想要在循环中滑动背景图像。我不知道如何使用JavaScript来做到这一点。我将使用单个图像,这个图像会连续滑动到背景中。 在此先感谢。在html5画布中滚动/滑动背景
5
A
回答
11
Theres通过putImageData
,第二种方法只使用drawImage
来实现这一点。另请注意,第二种方法的代码可以使其从左到右,或从右到左。
http://www.somethinghitme.com/projects/bgscroll/
var ctx = document.getElementById("canvas").getContext("2d"),
canvasTemp = document.createElement("canvas"),
scrollImg = new Image(),
tempContext = canvasTemp.getContext("2d"),
imgWidth = 0,
imgHeight =0,
imageData = {},
canvasWidth = 600,
canvasHeight = 240,
scrollVal = 0,
speed =2;
scrollImg.src = "citybg.png";
scrollImg.onload = loadImage;
function loadImage(){
imgWidth = scrollImg.width,
imgHeight = scrollImg.height;
canvasTemp.width = imgWidth;
canvasTemp.height = imgHeight;
tempContext.drawImage(scrollImg, 0,0, imgWidth, imgHeight);
imageData = tempContext.getImageData(0,0,imgWidth,imgHeight);
render();
}
function render(){
ctx.clearRect(0,0,canvasWidth,canvasHeight);
if(scrollVal >= canvasWidth-speed){
scrollVal = 0;
}
scrollVal+=speed;
// This is the bread and butter, you have to make sure the imagedata isnt larger than the canvas your putting image data to.
imageData = tempContext.getImageData(canvasWidth-scrollVal,0,scrollVal,canvasHeight);
ctx.putImageData(imageData, 0,0,0,0,scrollVal, imgHeight);
imageData = tempContext.getImageData(0,0,canvasWidth-scrollVal,canvasHeight);
ctx.putImageData(imageData, scrollVal,0,0,0,canvasWidth-scrollVal, imgHeight);
setTimeout(function(){render();},10);
}
第二方法使用相同的代码如上,只是改变这两个函数下面的内容。
http://www.somethinghitme.com/projects/bgscroll/scrolldrawimage.html
function loadImage(){
imgWidth = scrollImg.width,
imgHeight = scrollImg.height;
canvasTemp.width = imgWidth;
canvasTemp.height = imgHeight;
render();
}
function render(){
ctx.clearRect(0,0,canvasWidth,canvasHeight);
if(scrollVal >= canvasWidth){
scrollVal = 0;
}
scrollVal+=speed;
ctx.drawImage(scrollImg,canvasWidth-scrollVal,0,scrollVal,imgHeight, 0, 0, scrollVal,imgHeight);
ctx.drawImage(scrollImg,scrollVal,0,imgWidth, imgHeight);
// To go the other way instead
ctx.drawImage(scrollImg,-scrollVal,0,imgWidth, imgHeight);
ctx.drawImage(scrollImg,canvasWidth-scrollVal,0,imgWidth, imgHeight);
setTimeout(function(){render();},10);
}
相关问题
- 1. 滚动画布中的巨大背景
- 2. html5画布滚动
- 3. HTML5画布上移动TiledMap类背景
- 4. HTML5旋转/动画背景
- 5. HTML5无尽背景动画
- 6. 平滑的endles用画布滚动背景?
- 7. HTML5画布作为背景
- 8. HTML5画布背景图片
- 9. jquery和滑动/动画背景
- 10. 弹出式背景ListView滑动动画
- 11. 背景滚动布局
- 12. HTML5和画布:随着玩家的移动而移动背景
- 13. HTML5画布 - 制作带落金片的动画背景
- 14. 滑出滚动布局动画android
- 15. 列表滚动动画背景
- 16. CSS背景图像滚动动画
- 17. 滑动背景
- 18. 在html5画布上自定义滚动
- 19. 在画布上水平滚动。 HTML5
- 20. Android:滚动画廊中的背景
- 21. Html5 for mobile - 滑动滚动
- 22. 动态HTML5画布动画
- 23. Html5画布动画
- 24. HTML5背景动画onScroll,最佳实践
- 25. 带画布的动画背景
- 26. 使用画布动画作为背景
- 27. 动画GIF在HTML5画布
- 28. 多个背景与平滑滚动
- 29. 平滑渐变背景动画java
- 30. 滚动背景
我不知道你能不断地滑动一个形象 - 你可以滑动两半,其在边缘无缝地加入。 – Widor
@Coulton theres没有任何理由使用jQuery,它不对canvas进行任何操作。 – Loktar
@Widor您绝对可以使用一张图片,只需将其中的部分复制到画布上即可创建无缝效果。 – Loktar