个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我正在尝试旋转一个对象，但所有先前的帧仍然显示在 Canvas 上。我认为这与这一行有关:
setTimeout(this.rotate.bind(this), 1000 / 10);
如何让它只显示当前帧？
(function () {
var spinner = {
playerx: 810 * 0.5,
playery: 600 * 0.75,
shield: 1.80,
rotation: 0,
polyxx: [0, 12, 12, 0, -12, -12],
polyyy: [-13.92, -5.35, 5.35, 13.92, 5.35, -5.35],
size: 5,
canvasInit: function () {
this.canvas = document.getElementById('loadingScreen');
this.ctx = this.canvas.getContext('2d');
},
rotate: function () {
this.rotation += 0.02;
this.shield -= 0.01;
this.ctx.strokeStyle = 'rgba(255,255,255,' + this.shield + ')';
this.ctx.save();
this.ctx.translate(this.playerx, this.playery - 10);
this.ctx.rotate(this.rotation);
this.ctx.translate(-this.playerx, -(this.playery - 10));
this.ctx.beginPath();
this.ctx.lineWidth = 17;
for (var a = 0; a < 6; a++) {
this.ctx.lineTo(this.playerx + this.polyxx[a] * this.size, this.playery - 10 + this.polyyy[a] * this.size);
}
this.ctx.closePath();
this.ctx.stroke();
this.ctx.restore();
this.loop();
},
loop: function () {
setTimeout(this.rotate.bind(this), 1000 / 10);
},
init: function () {
this.canvasInit();
this.loop();
}
};
spinner.init();
})();<body>
<canvas style="background:#000;" id="loadingScreen" width="810" height="600"></canvas>
</body>最佳答案
每次制作动画时都需要清除 Canvas 。
将 this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); 添加到 rotate 方法的开头以实现这个。
例如:
(function () {
var spinner = {
playerx: 810 * 0.5,
playery: 600 * 0.75,
shield: 1.80,
rotation: 0,
polyxx: [0, 12, 12, 0, -12, -12],
polyyy: [-13.92, -5.35, 5.35, 13.92, 5.35, -5.35],
size: 5,
canvasInit: function () {
this.canvas = document.getElementById('loadingScreen');
this.ctx = this.canvas.getContext('2d');
},
rotate: function () {
// Clear canvas here, so that we're ready to draw the next frame
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.rotation += 0.02;
this.shield -= 0.01;
this.ctx.strokeStyle = 'rgba(255,255,255,' + this.shield + ')';
this.ctx.save();
this.ctx.translate(this.playerx, this.playery - 10);
this.ctx.rotate(this.rotation);
this.ctx.translate(-this.playerx, -(this.playery - 10));
this.ctx.beginPath();
this.ctx.lineWidth = 17;
for (var a = 0; a < 6; a++) {
this.ctx.lineTo(this.playerx + this.polyxx[a] * this.size, this.playery - 10 + this.polyyy[a] * this.size);
}
this.ctx.closePath();
this.ctx.stroke();
this.ctx.restore();
this.loop();
},
loop: function () {
setTimeout(this.rotate.bind(this), 1000 / 10);
},
init: function () {
this.canvasInit();
this.loop();
}
};
spinner.init();
})();<body>
<canvas style="background:#000;" id="loadingScreen" width="810" height="600"></canvas>
</body>注意
您可能还需要考虑使用 requestAnimationFrame 而不是 setTimeout 来提高动画性能。
关于javascript - Canvas 动画显示所有先前的帧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31732774/
27
4
0
我的应用将 SceneKit 内容的“页面”与图像和文本交替。当我从图像页面前进到新的 SceneKit 页面时，前一个 SceneKit 页面中的内容会短暂显示，然后被新内容替换。时髦。 我只使用一
我正在尝试处理(在 C# 中)包含一些数字数据的大型数据文件。给定一个整数数组，如何对其进行拆分/分组，以便如果下一个 n(两个或更多)是负数，则前一个 n 元素被分组。例如，在下面的数组中，应该使用
刚接触promises，研究过。所以我的代码和我的理解: sql.connect(config).then(function(connection) { return connection.req
目前我在 if (roobaf) block 中有一些代码，这取决于 foo 和 bar 是否为假。我可以在 block 内再次检查这些条件，但感觉像是不必要的代码重复。 if (foo) {
我是一名优秀的程序员,十分优秀！