这是代码，我画了 2 个圆和 2 条线，另外一条线与第二条线平行。 Here is a screenshot
<html>
<head>
<body>
<canvas id="Panel" height=500 width=500 style ="border: 1px dotted green">
</canvas>
</body>
<script>
var canvas = document.getElementById("Panel");
var draw = canvas.getContext("2d");
draw.beginPath();
draw.arc(canvas.width/2,100,10,2*Math.PI,false);
draw.fillSytle="black";
draw.fill();
draw.arc(canvas.width/2,200,10,2*Math.PI,false);
draw.fillSytle="black";
draw.fill();
draw.moveTo(canvas.width/2,0);
draw.lineTo(canvas.width/2,100);
draw.moveTo(canvas.width/2,100);
draw.lineTo(canvas.width/2,200);
draw.stroke();
</script>
</head>
</html>
最佳答案
检查下面的片段。你只需要绘制两个单独的表格
var canvas = document.getElementById("Panel");
var draw = canvas.getContext("2d");
draw.beginPath();
draw.arc(canvas.width/2 -50,200,10,2*Math.PI,false);
draw.fillSytle="black";
draw.fill();
draw.moveTo(canvas.width/2 -50,0);
draw.lineTo(canvas.width/2 -50,200);
draw.stroke();
var draww = canvas.getContext("2d");
draww.beginPath();
draww.arc(canvas.width/2 +50,200,10,2*Math.PI,false);
draww.fillSytle="black";
draww.fill();
draww.moveTo(canvas.width/2 +50,0);
draww.lineTo(canvas.width/2 +50,200);
draww.stroke(); <canvas id="Panel" height=500 width=500 style ="border: 1px dotted green">
</canvas>关于javascript - 使用 DOM 绘制钟摆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50543799/