Javascript 在上一画布上绘制一个旋转圆
我试图在另一张画布上画一个旋转的圆圈 我已经画出了这个圆，但是一旦它旋转，它就会把旋转半径内的所有东西都填充成白色，这个圆就会变成一个大的连续圆 我只想要一个围绕画布中心旋转的小圆圈，就像行星围绕太阳旋转一样 这只是我真实代码中的示例代码红色矩形是一个旋转方向相反的轮盘赌轮这就是我有两个画布的原因 我需要（球）是白色的这就是为什么我尝试使用.fillstyle和fill（），但它无法按照我的意愿工作 这是我的密码：Javascript 在上一画布上绘制一个旋转圆,javascript,html,canvas,rotation,geometry,Javascript,Html,Canvas,Rotation,Geometry,我试图在另一张画布上画一个旋转的圆圈 我已经画出了这个圆，但是一旦它旋转，它就会把旋转半径内的所有东西都填充成白色，这个圆就会变成一个大的连续圆 我只想要一个围绕画布中心旋转的小圆圈，就像行星围绕太阳旋转一样 这只是我真实代码中的示例代码红色矩形是一个旋转方向相反的轮盘赌轮这就是我有两个画布的原因 我需要（球）是白色的这就是为什么我尝试使用.fillstyle和fill（），但它无法按照我的意愿工作 这是我的密码： <html> <head> </head>
<html>
<head>
</head>
<body>
<style>
#container { position: relative; }
.canvas { position: absolute; top: 0; left: 0; }
</style>
<div id = 'container'>
<canvas class = "canvas" id= "rectangleCanvas" width = "500" height= "500" style = "z-index : 1" ></canvas>
<canvas class = "canvas" id= "ballCanvas" width = "500" height= "500" style = "z-index : 2"></canvas>
</div>
<script type="text/javascript">
function drawRectangle(){
var canvas = document.getElementById("rectangleCanvas")
ctx = canvas.getContext("2d");
ctx.fillStyle = 'red';
ctx.fillRect(0,0,500,500);
};
drawRectangle();
function drawBall(){
var canvas = document.getElementById("ballCanvas");
if(canvas.getContext){
ctx2 = canvas.getContext("2d");
ctx2.strokeStyle = 'black';
ctx2.fillStyle = 'white';
ctx2.clearRect(0, 0, 500, 500);
ctx2.translate(250,250);
ctx2.rotate(Math.PI / -180);
ctx2.translate(-250, -250);
ctx2.arc(250,65,10,0,2*Math.PI);
ctx2.stroke();
ctx2.fill();
}
}
setInterval(drawBall,5);
</script>
</body>
#容器{位置：相对；}
.canvas{位置：绝对；顶部：0；左侧：0；}
函数drawRectangle（）{
var canvas=document.getElementById（“矩形画布”）
ctx=canvas.getContext（“2d”）；
ctx.fillStyle='红色'；
ctx.fillRect（0,0500500）；
};
drawRectangle（）；
函数{
var canvas=document.getElementById（“ballCanvas”）；
if（canvas.getContext）{
ctx2=canvas.getContext（“2d”）；
ctx2.strokeStyle=‘黑色’；
ctx2.fillStyle='白色'；
ctx2.clearRect（0,0500500）；
ctx2.翻译（250250）；
ctx2.旋转（Math.PI/-180）；
ctx2.翻译（-250，-250）；
ctx2.arc（250,65,10,0,2*Math.PI）；
ctx2.stroke（）；
ctx2.fill（）；
}
}
设置间隔（牵引杆，5）；
有人能帮忙吗？您只需重新绘制计时器每一步的角度。画布就是这样工作的。您只需重新绘制计时器每一步的角度。画布就是这样工作的。插入
ctx2.beginPath();
ctx2.beginPath();
setIntervalcanvas.getContext（“2d”）setInterval