gpt4 book ai didi

javascript - 水平滚动 Canvas

转载 作者:行者123 更新时间:2023-11-28 02:10:16 24 4
gpt4 key购买 nike

我正在尝试绘制一个“无限”图形,其想法是,我将 Canvas 重新绘制到自身中,方法是将其向左移动一个像素,然后清除最右边的列,将像素绘制到清除的列中。但有些东西不起作用,我不明白是什么。示例代码如下:

var telemetryScreen, telemetryTimer;

function displayUI() {
if (!telemetryScreen) {
telemetryScreen = document.createElement("div");
telemetryScreen.className = "telemetry-screen";
document.body.appendChild(telemetryScreen);
}
return telemetryScreen;
}

var plotFps = function(canvas) {
canvas.className = "telemetry-fps";
canvas.width = 320;
canvas.height = 240;
canvas.getContext("2d").fillStyle = "red";
if (!telemetryScreen) displayUI().appendChild(canvas);
return function (delta) {
var context = canvas.getContext("2d");
context.drawImage(canvas, 1, 0, 319, 240, 0, 0, 319, 240);
context.clearRect(319, 0, 1, 240);
context.fillRect(319, 120 + delta, 1, 1);
};
}(document.createElement("canvas"));

function startSampling() {
var now, delta, last, start = new Date().getTime(),
seconsPerFrame = 16;
if (telemetryTimer) clearInterval(telemetryTimer);
telemetryTimer = setInterval(
function () {
last = now;
now = new Date().getTime();
delta = now - last - seconsPerFrame;
plotFps(delta);
}, seconsPerFrame);
// We don't anticipate framerates
// higher then 60 fps
}

startSampling();

我也尝试过 translate(),但在 Canvas 滚动超过其宽度之一后它停止工作:/

最佳答案

要创建无限平移效果:

  • 每一帧,在前一帧左侧几个像素处绘制图像(或图形)
  • 在右侧的“空”像素中绘制图像(或图表)的副本

这是图像的基本代码(您可以改为绘制图表):

    var fps = 60;
var offsetLeft=0;
function pan() {

// increase the left offset
offsetLeft+=1;
if(offsetLeft>infiniteImageWidth){ offsetLeft=0; }

ctx.drawImage(infiniteImage,-offsetLeft,0);
ctx.drawImage(infiniteImage,infiniteImage.width-offsetLeft,0);

setTimeout(function() {
requestAnimFrame(pan);
}, 1000 / fps);
}

这是代码(由于愚蠢的 CORS 安全性,您需要提供自己的图像):

您可以忽略用于在山地景观图像上创建无缝过渡的“镜像”效果。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>

<script>
$(function(){

// thanks Paul Irish for this RAF fallback shim
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();


var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var infiniteImage;
var infiniteImageWidth;
var img=document.createElement("img");
img.onload=function(){

// use a tempCanvas to create a horizontal mirror image
// This makes the panning appear seamless when
// transitioning to a new image on the right
var tempCanvas=document.createElement("canvas");
var tempCtx=tempCanvas.getContext("2d");
tempCanvas.width=img.width*2;
tempCanvas.height=img.height;
tempCtx.drawImage(img,0,0);
tempCtx.save();
tempCtx.translate(tempCanvas.width,0);
tempCtx.scale(-1,1);
tempCtx.drawImage(img,0,0);
tempCtx.restore();
infiniteImageWidth=img.width*2;
infiniteImage=document.createElement("img");
infiniteImage.onload=function(){
pan();
}
infiniteImage.src=tempCanvas.toDataURL();
}
img.src="YourLandscapeImage.jpg";


var fps = 60;
var offsetLeft=0;
function pan() {

// increase the left offset
offsetLeft+=1;
if(offsetLeft>infiniteImageWidth){ offsetLeft=0; }

ctx.drawImage(infiniteImage,-offsetLeft,0);
ctx.drawImage(infiniteImage,infiniteImage.width-offsetLeft,0);

setTimeout(function() {
requestAnimFrame(pan);
}, 1000 / fps);
}

}); // end $(function(){});
</script>

</head>

<body>
<canvas id="canvas" width=500 height=143></canvas><br>
</body>
</html>

关于javascript - 水平滚动 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17212646/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com