需要一些帮助来完成这项工作。基本上我使用Javascript画布来模拟高速公路的道路。请注意，最初一切都很顺利，状况良好。但是，随着时间的推移，内容将不再平滑。
有谁知道这里的问题是什么？我注意到刷新浏览器确实解决了这个问题。在这种情况下，我可以知道如何在没有可见刷新的情况下刷新内容吗？
window.requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function (f) { return setTimeout(f, 1000 / 50) }
window.cancelAnimationFrame = window.cancelAnimationFrame
|| window.mozCancelAnimationFrame
var canvas = document.getElementById("canV"); //obtain the content
var ctx = canvas.getContext("2d");
var angle = 0;
var rect = []; //initialize for predefined width purposes.
var mouse = {
x: 0,
y: 0,
w: 0,
alt: false,
shift: false,
ctrl: false,
buttonLastRaw: 0, // user modified value
buttonRaw: 0,
over: false,
buttons: [1, 2, 4, 6, 5, 3], // masks for setting and clearing button raw bits;
};
function mouseMove(event) {
mouse.x = event.offsetX;
mouse.y = event.offsetY;
if (mouse.x === undefined) {
mouse.x = event.clientX;
mouse.y = event.clientY;
}
mouse.alt = event.altKey;
mouse.shift = event.shiftKey;
mouse.ctrl = event.ctrlKey;
if (event.type === "mousedown") {
event.preventDefault();
//console.log("this is mouse.buttonRaw before (mousedown): " + mouse.buttonRaw);
console.log("this is event.which (mousedown): " + event.which);
var valu = mouse.buttonRaw |= mouse.buttons[event.which - 1]; //bitwise AND operator (convert to binary and do the operation)
//console.log("this is value value: " + value);
} else if (event.type === "mouseup") {
//console.log("this is mouse.buttonRaw before (mouseup): " + mouse.buttonRaw);
//console.log("this is event.which (mouseup): " + event.which);
mouse.buttonRaw &= mouse.buttons[event.which + 2]; //bitwise OR operator (convert to binary and do the operation)
} else if (event.type === "mouseout") {
mouse.buttonRaw = 0;
mouse.over = false;
} else if (event.type === "mouseover") {
mouse.over = true;
} else if (event.type === "mousewheel") {
event.preventDefault();
mouse.w = event.wheelDelta;
} else if (event.type === "DOMMouseScroll") { // FF you pedantic doffus
mouse.w = -event.detail;
}
}
function setupMouse(e) {
//syntax addEventListener (event, function, useCapture)
e.addEventListener('mousemove', mouseMove);
e.addEventListener('mousedown', mouseMove);
e.addEventListener('mouseup', mouseMove);
e.addEventListener('mouseout', mouseMove);
e.addEventListener('mouseover', mouseMove);
e.addEventListener('mousewheel', mouseMove);
e.addEventListener('DOMMouseScroll', mouseMove); // fire fox
e.addEventListener("contextmenu", function(e) {
e.preventDefault();
}, false);
}
setupMouse(canvas);
// terms.
// Real space, real, r (prefix) refers to the transformed canvas space.
// c (prefix), chase is the value that chases a required value
var displayTransform = {
x: 0,
y: 0,
ox: 0,
oy: 0,
scale: 6,
rotate: 0,
cx: 0, // chase values Hold the actual display
cy: 0,
cox: 0,
coy: 0,
cscale: 1,
crotate: 0,
dx: 0, // deltat values
dy: 0,
dox: 0,
doy: 0,
dscale: 1,
drotate: 0,
drag: 0.2, // drag for movements
accel: 0.5, // acceleration
matrix: [0, 0, 0, 0, 0, 0], // main matrix
invMatrix: [0, 0, 0, 0, 0, 0], // invers matrix;
mouseX: 0,
mouseY: 0,
ctx: ctx,
setTransform: function() {
var m = this.matrix;
var i = 0;
this.ctx.setTransform(m[i++], m[i++], m[i++], m[i++], m[i++], m[i++]);
},
setHome: function() {
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
},
update: function() {
// smooth all movement out. drag and accel control how this moves
// acceleration
this.dx += (this.x - this.cx) * this.accel;
console.log("this is dx: " + this.dx);
this.dy += (this.y - this.cy) * this.accel;
this.dox += (this.ox - this.cox) * this.accel;
this.doy += (this.oy - this.coy) * this.accel;
this.dscale += (this.scale - this.cscale) * this.accel;
// drag
this.dx *= this.drag;
this.dy *= this.drag;
this.dox *= this.drag;
this.doy *= this.drag;
this.dscale *= this.drag;
// set the chase values. Chase chases the requiered values
this.cx += this.dx;
this.cy += this.dy;
this.cox += this.dox;
this.coy += this.doy;
this.cscale += this.dscale;
// create the display matrix
this.matrix[0] = Math.cos(this.crotate) * this.cscale;
this.matrix[1] = Math.sin(this.crotate) * this.cscale;
this.matrix[2] = -this.matrix[1];
this.matrix[3] = this.matrix[0];
// set the coords relative to the origin
this.matrix[4] = -(this.cx * this.matrix[0] + this.cy * this.matrix[2]) + this.cox;
this.matrix[5] = -(this.cx * this.matrix[1] + this.cy * this.matrix[3]) + this.coy;
// create invers matrix
var det = (this.matrix[0] * this.matrix[3] - this.matrix[1] * this.matrix[2]);
this.invMatrix[0] = this.matrix[3] / det;
this.invMatrix[1] = -this.matrix[1] / det;
this.invMatrix[2] = -this.matrix[2] / det;
this.invMatrix[3] = this.matrix[0] / det;
// check for mouse. Do controls and get real position of mouse.
if (mouse !== undefined) { // if there is a mouse get the real canvas coordinates of the mouse
if (mouse.oldX !== undefined && (mouse.buttonRaw & 1) === 1) { // check if panning (middle button)
var mdx = mouse.x - mouse.oldX; // get the mouse movement
var mdy = mouse.y - mouse.oldY;
// get the movement in real space
var mrx = (mdx * this.invMatrix[0] + mdy * this.invMatrix[2]);
var mry = (mdx * this.invMatrix[1] + mdy * this.invMatrix[3]);
this.x -= mrx;
this.y -= mry;
}
// do the zoom with mouse wheel
if (mouse.w !== undefined && mouse.w !== 0) {
//this.ox = mouse.x;
//this.oy = mouse.y;
//this.x = this.mouseX;
//this.y = this.mouseY;
/* Special note from answer */
// comment out the following is you change drag and accel
// and the zoom does not feel right (lagging and not
// zooming around the mouse
/*
this.cox = mouse.x;
this.coy = mouse.y;
this.cx = this.mouseX;
this.cy = this.mouseY;
*/
if (mouse.w > 0) { // zoom in
this.scale *= 1.1;
console.log(this.scale);
mouse.w -= 20;
if (mouse.w < 0) {
mouse.w = 0;
}
}
if (mouse.w < 0) { // zoom out
this.scale *= 1/1.1;
mouse.w += 20;
if(this.scale <=0.5){
this.scale = 0.5;
}
if (mouse.w > 0) {
mouse.w = 0;
}
}
}
// get the real mouse position
var screenX = (mouse.x - this.cox);
var screenY = (mouse.y - this.coy);
this.mouseX = this.cx + (screenX * this.invMatrix[0] + screenY * this.invMatrix[2]);
this.mouseY = this.cy + (screenX * this.invMatrix[1] + screenY * this.invMatrix[3]);
mouse.rx = this.mouseX; // add the coordinates to the mouse. r is for real
mouse.ry = this.mouseY;
// save old mouse position
mouse.oldX = mouse.x;
mouse.oldY = mouse.y;
}
}
}
// set up font
ctx.font = "14px verdana";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// timer for stuff
var timer = 0;
var w = 1000,
h = 500;
setInterval(update, 6);
//requestAnimationFrame(update);
function update() {
timer += 1; // update timer
console.log("this is timer" + timer);
if(timer > 1000){
timer = 0;
console.log("clear");
clearInterval(update);
}
// update the transform
displayTransform.update();
ctx.clearRect(0, 0, canvas.width, canvas.height);
// set home transform to clear the screen
displayTransform.setHome();
ctx.clearRect(0, 0, canvas.width, canvas.height);
displayTransform.setTransform();
ctx.clearRect(0, 0, canvas.width, canvas.height);
//first segment
this.width = 23300;
this.height = 150;
this.x = 0;
this.y = 150;
this.color = "#605A4C"; //light grey (road)
ctx.save(); //save the unrotated context of the canvas
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width / 8, this.height);
ctx.fillStyle = "#DCDCDC"; //white grey
ctx.fillRect(this.x, this.y + ((this.height / 2) - 1), this.width / 8, 2); //middle white line
ctx.fillStyle = "ffffff";
ctx.beginPath();
ctx.setLineDash([2, 6]);
ctx.moveTo(this.x, this.y + ((this.height / 4) - 1));
ctx.lineTo((this.x + this.width / 8), this.y + ((this.height / 4) - 1));
ctx.closePath();
ctx.strokeStyle = "#A09383"; //lighter grey
ctx.lineWidth = 1;
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.setLineDash([2, 6]);
ctx.moveTo(this.x, this.y + ((this.height / (4 / 3)) - 1));
ctx.lineTo((this.x + this.width / 8), this.y + ((this.height / (4 / 3)) - 1));
ctx.closePath();
ctx.strokeStyle = "#A09383"; //lighter grey
ctx.lineWidth = 1;
ctx.fill();
ctx.stroke();
ctx.fillStyle = "#A09383"; //lighter grey
ctx.fillRect(this.x, this.y - 10, this.width / 8, 10);
ctx.fillStyle = "#A09383"; //lighter grey
ctx.fillRect(this.x, this.y + this.height, this.width / 8 + 2 /*a little long to cover up white region)*/ , 10);
//requestAnimationFrame(update);
}.canC {
width: 100%;
height: 100%;
background-color: rgba(87, 80, 86, 0.5);
}<div>
<canvas class="canC" id="canV" width="3840" height="2160">
</canvas>
</div>
答案 0 :(得分：0)
正如瑞恩建议的那样。在更新函数结束时添加ctx.restore()已解决了我的问题。为了更好地理解这个问题。 Kaiido提供了参考链接How to delete the state stack for a JavaScript canvas rendering context。
再一次非常感谢你帮助我。