Javascript 使用DOM绘制钟摆_Javascript_Html_Css_Dom_Canvas

Javascript 使用DOM绘制钟摆

javascript html css dom canvas

Javascript 使用DOM绘制钟摆,javascript,html,css,dom,canvas,Javascript,Html,Css,Dom,Canvas,这是代码，我画了两个圆圈和两条线，另外一条线与第二条线平行 var canvas=document.getElementById（“面板”）； var draw=canvas.getContext（“2d”）； draw.beginPath（）；绘制弧（画布宽度/2100,10,2*Math.PI，假）； draw.fillSytle=“黑色”； draw.fill（）；绘制弧（画布宽度/2200,10,2*Math.PI，假）； draw.fillSytle=“黑色”； draw.fil

这是代码，我画了两个圆圈和两条线，另外一条线与第二条线平行


var canvas=document.getElementById（“面板”）；
var draw=canvas.getContext（“2d”）；
draw.beginPath（）；
绘制弧（画布宽度/2100,10,2*Math.PI，假）；
draw.fillSytle=“黑色”；
draw.fill（）；
绘制弧（画布宽度/2200,10,2*Math.PI，假）；
draw.fillSytle=“黑色”；
draw.fill（）；
draw.moveTo（画布宽度/2,0）；
绘制线条（画布宽度/2100）；
draw.moveTo（画布宽度/2100）；
绘制线条（画布宽度/2200）；
draw.stroke（）；

检查下面的代码片段。你只需要画两张单独的表格

var canvas=document.getElementById（“面板”）；
var draw=canvas.getContext（“2d”）；
draw.beginPath（）；
绘制弧（canvas.width/2-50200,10,2*Math.PI，假）；
draw.fillSytle=“黑色”；
draw.fill（）；
draw.moveTo（canvas.width/2-50,0）；
draw.lineTo（canvas.width/2-50200）；
draw.stroke（）；
var draww=canvas.getContext（“2d”）；
draww.beginPath（）；
绘制弧（canvas.width/2+50200,10,2*数学圆周率，假）；
draww.fillSytle=“黑色”；
draww.fill（）；
draww.moveTo（画布宽度/2+50,0）；
图纸线条（画布宽度/2+50200）；
draww.stroke（）

不需要draww=canvas.getContext（“2d”）
getContext（）将返回与以前相同的对象。所需要的只是开始一条新的道路。我画的每一件东西都必须这样做吗？在javaScript中绘制图形的更好方法是什么？您可以始终使用循环
    <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>