Javascript 如何将旋转圆附着到汽车的拐角处？
我需要旋转的圆圈被锚定到角落，而不管汽车的旋转。按下这些键时，机器移动、转动，圆圈移动 相反，旋转的圆圈随着汽车的转动而移动。 相反，旋转的圆圈随着汽车的转动而移动。如何修复？代码如下：Javascript 如何将旋转圆附着到汽车的拐角处？,javascript,html,Javascript,Html,我需要旋转的圆圈被锚定到角落，而不管汽车的旋转。按下这些键时，机器移动、转动，圆圈移动 相反，旋转的圆圈随着汽车的转动而移动。 相反，旋转的圆圈随着汽车的转动而移动。如何修复？代码如下： #试验{ 宽度：100px； 高度：100px； 保证金：0px自动； } window.onload=函数（） { const canvas=document.getElementById（“mycanvas”）； canvas.style.background=“#4444”； var x=170；
#试验{
宽度：100px；
高度：100px；
保证金：0px自动；
}
window.onload=函数（）
{
const canvas=document.getElementById（“mycanvas”）；
canvas.style.background=“#4444”；
var x=170；
变量y=150；
var-x1=35；
变量y1=35；
const ctx=canvas.getContext（“2d”）；
const radianCircle=Math.PI*2；
var leftPressedFlag=false；
var rightPressedFlag=false；
var upPressedFlag=错误；
var downPressedFlag=false；
无功转速=1；
var角=0；
var mod=0；
var偏移=0；
var pi2=2*Math.PI；
var阶跃=0.03；
函数main（）
{
汽车=新形象（）；
car.src=”http://i.imgur.com/uwApbV7.png";
var moveInterval=setInterval（函数（）{
draw（）；
}, 30);
}
文件.添加的EventListener（“向下键控”，功能（evt）
{
如果（evt.keyCode==38）
{
upPressedFlag=true；
}
如果（evt.keyCode==40）
{
downPressedFlag=true；
}
如果（evt.keyCode==37）
{
leftPressedFlag=true；
}
if（evt.keyCode==39）
{
rightPressedFlag=true；
}
});
文件.附录列表（“键控”，功能（evt）
{
如果（evt.keyCode==38）
{
upPressedFlag=false；
}
如果（evt.keyCode==40）
{
downPressedFlag=false；
}
如果（evt.keyCode==37）
{
leftPressedFlag=false；
}
if（evt.keyCode==39）
{
rightPressedFlag=false；
}
});
设i=0；
函数图（）{
clearRect（0，0，canvas.width，canvas.height）；
i++；
如果（！upPressedFlag | |！downPressedFlag）
{
mod=0；
}
if（upPressedFlag）
{
mod=5；
}
如果（按下标记）
{
mod=-5；
}
如果（leftPressedFlag）
{
角度-=5；
}
如果（右按标志）
{
角度+=5；
}
x+=（速度*模）*数学cos（数学PI/180*角）；
y+=（速度*模）*数学正弦（数学π/180*角）；
ctx.save（）；
ctx.translate（x，y）；
ctx.旋转（数学PI/180*角度）；
ctx.drawImage（car，-（car.width/2），-（car.height/2））；
ctx.restore（）；
ctx.beginPath（）；
ctx.lineWidth=15；
ctx.strokeStyle=“#4F7942”；
虚线圆（ctx，x，y，15，偏移%pi2，5，0.7）；
ctx.stroke（）；
偏移量+=步长；
}
main（）；
函数虚线圆（ctx、x、y、半径、偏移、线段、大小）{
var pi2=2*Math.PI，
segs=pi2/段，
len=分段*尺寸，
i=0，
斧头，唉；
var xd=getPositions（i/100）[0]；
var yd=获得位置（i/100）[1]；
ctx.save（）；
ctx.translate（xd，yd）；
ctx.旋转（偏移）；
ctx.translate（-x，-y）；
对于（；i
#试验{
宽度：100px；
高度：100px；
保证金：0px自动；
}
window.onload=函数（）{
const canvas=document.getElementById（“mycanvas”）；
canvas.style.background=“#4444”；
var x=170；
变量y=150；
var-x1=35；
变量y1=35；
const ctx=canvas.getContext（“2d”）；
const radianCircle=Math.PI*2；
var leftPressedFlag=false；
var rightPressedFlag=false；
var upPressedFlag=错误；
var downPressedFlag=false；
无功转速=1；
var角=0；
var mod=0；
var偏移=0；
var pi2=2*Math.PI；
var阶跃=0.03；
函数main（）{
汽车=新形象（）；
car.src=”http://i.imgur.com/uwApbV7.png";
var moveInterval=setInterval（函数（）{
draw（）；
}, 30);
}
文件.添加的EventListener（“向下键控”，功能（evt）{
如果（evt.keyCode==38）{
支持
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width:100px;
height:100px;
margin:0px auto;
}
</style>
<script type = "text/javascript">
window.onload = function()
{
const canvas = document.getElementById("mycanvas");
canvas.style.background = "#444444";
var x = 170;
var y = 150;
var x1 = 35;
var y1 = 35;
const ctx = canvas.getContext("2d");
const radianCircle = Math.PI * 2;
var leftPressedFlag=false;
var rightPressedFlag=false;
var upPressedFlag=false;
var downPressedFlag=false;
var speed = 1;
var angle = 0;
var mod = 0;
var offset = 0;
var pi2 = 2*Math.PI;
var step = 0.03;
function main()
{
car = new Image();
car.src = "http://i.imgur.com/uwApbV7.png";
var moveInterval = setInterval(function () {
draw();
}, 30);
}
document.addEventListener("keydown",function(evt)
{
if(evt.keyCode==38)
{
upPressedFlag = true;
}
if(evt.keyCode==40)
{
downPressedFlag = true;
}
if(evt.keyCode==37)
{
leftPressedFlag = true;
}
if(evt.keyCode==39)
{
rightPressedFlag=true;
}
});
document.addEventListener("keyup",function(evt)
{
if(evt.keyCode==38)
{
upPressedFlag = false;
}
if(evt.keyCode==40)
{
downPressedFlag = false;
}
if(evt.keyCode==37)
{
leftPressedFlag = false;
}
if(evt.keyCode==39)
{
rightPressedFlag=false;
}
});
let i = 0;
function draw () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
i++;
if(!upPressedFlag || !downPressedFlag)
{
mod = 0;
}
if(upPressedFlag)
{
mod = 5;
}
if(downPressedFlag )
{
mod = -5;
}
if(leftPressedFlag)
{
angle -= 5;
}
if(rightPressedFlag)
{
angle += 5;
}
x += (speed * mod) * Math.cos(Math.PI / 180 * angle);
y += (speed * mod) * Math.sin(Math.PI / 180 * angle);
ctx.save();
ctx.translate(x, y);
ctx.rotate(Math.PI / 180 * angle);
ctx.drawImage(car, -(car.width / 2), -(car.height / 2));
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 15;
ctx.strokeStyle = "#4F7942";
dashedCircle(ctx, x, y, 15, offset % pi2, 5, 0.7);
ctx.stroke();
offset += step;
}
main();
function dashedCircle(ctx, x, y, radius, offset, segments, size) {
var pi2 = 2 * Math.PI,
segs = pi2 / segments,
len = segs * size,
i = 0,
ax, ay;
var xd = getPositions(i / 100)[0];
var yd = getPositions(i / 100)[1];
ctx.save();
ctx.translate(xd,yd);
ctx.rotate(offset);
ctx.translate(-x,-y);
for(; i < pi2; i += segs) {
ax = x + radius * Math.cos(i);
ay = y + radius * Math.sin(i);
ctx.moveTo(ax, ay);
ctx.arc(x, y, radius, i, i + len);
}
ctx.restore();
}
function getPositions (i) {
return [
x + x1 - (Math.cos(radianCircle * i / 2) * 10),
y - y1 + (Math.sin(radianCircle * i / 2) * 10),
];
}
}
</script>
</head>
<body id = "test" >
<canvas id = "mycanvas" width = "500" height = "500"></canvas>
</body>
</html>