如何解决尝试在画布中渲染某些内容时如何防止出现故障?
所以,我尝试使用箭头键让角色在屏幕上移动,虽然它有效,但会留下条纹。我不希望我的后端出现条纹。我知道为什么它会产生这些条纹,但不知道如何摆脱它们。出现条纹的原因是玩家正在从画布中清除,然后渲染延迟很大。我该如何阻止?
编辑:我希望它只清除播放器,而不清除它周围的任何东西。
片段:
const c = document.getElementById('c')
const ctx = c.getContext('2d')
c.height = window.innerHeight
c.width = window.innerWidth
let blockInfo = {
h: 15,// Height in pixels. I'm gonna use this like blocks,like this: blockAmount * blockInfo.h
w: 15
}
let renderedPlayer = false // The player wasn't rendered yet so this is false
let player = {
speed: 0.125,x: 2,y: 2,height: 1,width: 1
}
function clearPlayer() { // I think this is where the glitch comes in.
ctx.clearRect(player.x * blockInfo.w,player.y * blockInfo.h,player.width * blockInfo.w,player.height * blockInfo.h)
}
function renderPlayer() {
ctx.fillRect(player.x * blockInfo.w,player.height * blockInfo.h)
}
function press(e) { // When a character on the keyboard gets pressed:
let w = e.which
if (renderedPlayer == true) {
clearPlayer() // It clears the player before the player moves,so it doesn't have more streaks.
if (w == 39) {
player.x += player.speed
} else if (w == 37) {
player.x -= player.speed
} else if (w == 38) {
player.y -= player.speed
} else if (w == 40) {
player.y += player.speed
}
}
}
setInterval(function() { // Rendering player each MS.
renderedPlayer = false
renderPlayer()
renderedPlayer = true
},0)
body {
margin: 0;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body onkeydown="press(event)">
<canvas id="c"></canvas>
<script src="script.js"></script>
</body>
</html>
解决方法
我会在你画画之前清除整个画布,就像这样:
const c = document.getElementById('c')
const ctx = c.getContext('2d')
c.height = c.width = 180
let blockInfo = {h: 15,w: 15}
let player = {speed: 0.1,x: 2,y: 2,height: 1,width: 1}
function render() {
ctx.clearRect(0,c.width,c.height)
//renderOtherStuff
ctx.fillStyle = "#FF0000";
ctx.arc(75,75,60,Math.PI * 2,true);
ctx.fill();
//renderPlayer
ctx.fillStyle = "#000000";
ctx.fillRect(player.x * blockInfo.w,player.y * blockInfo.h,player.width * blockInfo.w,player.height * blockInfo.h)
}
function press(e) { // When a character on the keyboard gets pressed:
let w = e.which
if (w == 39) {
player.x += player.speed
} else if (w == 37) {
player.x -= player.speed
} else if (w == 38) {
player.y -= player.speed
} else if (w == 40) {
player.y += player.speed
}
}
setInterval(render,25)
<body onkeydown="press(event)">
<canvas id="c"></canvas>
</body>
当您引入其他可能重叠的对象时,仅清除播放器会带来其他问题,当您清除播放器时,您也会清除可能包含其他内容的背景。
...此外,这看起来像是一个简单游戏的开始,如果你认真对待它,请研究一个合适的游戏引擎,那里有一堆开源的:
https://github.com/collections/javascript-game-engines
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。