Question

以下是代码，我绘制了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>

Answer 1

检查下面的代码段。你只需要绘制两个单独的表格

＆＃13;

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();

＆＃13;

 <canvas id="Panel" height=500 width=500 style ="border: 1px dotted green">
        </canvas>

＆＃13;

使用DOM绘制钟摆

1 个答案: