Нарисуйте маятник с помощью DOM - PullRequest
Новая
       0

Нарисуйте маятник с помощью DOM

0 голосов
/ 26 мая 2018

Вот код, я рисую 2 круга и 2 линии, а дополнительная линия появляется параллельно второй линии. Вот скриншот 

    <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>

1 Ответ

0 голосов
/ 26 мая 2018

Проверьте фрагмент ниже.Вам просто нужно нарисовать две отдельные формы 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...