В нижеприведенном коде, очень странная ошибка!!!! когда я рисую линию
ctx.lineTo(0,5);
ctx.moveTo(10,10);
ctx.stroke();
то все нормально ! но когда я рисую линию в игре... тут такое....почему то когда мой корабль двигается то линия "размазывается" !!! хотя не должна.
вот мой код:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<canvas id='myCanvas' height='500' width='700' style="border:1px solid black;"class="invisible"> </canvas>
<script type="text/javascript">
var angle1 = 0;
var sp = 1;
var x = 400;
var y = 250;
var speed = 1;
var angle = 0;
var mod = 0;
var stop = 0;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ship1 = new Image();
ship1.src = "https://i.paste.pics/74f8b071f80f88d8f71df1ffa634ee38.png";
ship1.onload = game;
function draw() {
ctx.fillStyle = "green";
ctx.fillRect(x, y, 30, 45);
ctx.beginPath();
ctx.moveTo(x+100, y+100);
ctx.lineTo(x+200, y+100);
ctx.stroke();
ctx.save();
ctx.translate(400, 200);
ctx.rotate(Math.PI / 480 * angle);
ctx.scale(0.5,0.5);
ctx.drawImage(ship1, -40, -40,80,80);
ctx.restore();
ctx.save();
ctx.font = "14px Arial";
ctx.fillStyle = "black";
ctx.fillText("x:" + Math.round(x),110,40);
ctx.fillText("y:" + Math.round(y),190,40);
document.onkeydown = function(event) {
if (event.keyCode == 87 || event.keyCode == 83) {
mod = 0; e = 1; stop = 1;}
}
document.onkeydown = function(event) {
//console.log(event.keyCode);
if (event.keyCode == 87) {
mod = 1;
}
if (event.keyCode == 83) {
mod = -1;
}
if (event.keyCode == 65) {
angle -= 10; stop = 0;
}
if (event.keyCode == 68) {
angle += 10; stop =0;
}
if (event.keyCode == 32) {
}
if(event.keyCode == 70){ stop = 1;}
}}
function move(){
if( stop == 0){
x += (speed * mod) * Math.cos(Math.PI / 480 * angle);
y += (speed * mod) * Math.sin(Math.PI / 480 * angle);
angle1 += 0.2 * Math.PI / 180;
}}
function game() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw();
move();
requestAnimationFrame(game);
}
</script>
</body>
</html>
В чем заключается эта странная аномалия?! у линии не должен быть след !!!!! даже когда я пишу ctx.lineTo(x+5,y+10);