Computer_Graphics/lab_01_2.html at master · capsidimit/Computer_Graphics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
   <body>
       <canvas width='500' height='500' id='lab01'> </canvas>
       <script>

            var canvas = document.getElementById('lab01');
            var ctx = canvas.getContext('2d');

                /*ctx.fillStyle="#000000";
                ctx.clearRect(0,0,canvas.width, canvas.height);
                ctx.fillRect(0+coord_x, 0+coord_y,rectangle_width,rectangle_height);  */
            var lines = 250;
            var dot_start,dots;

            var Width_Triangle = canvas.width/2 - lines;

            for (var ActualLine = 0; ActualLine < lines; ActualLine ++)
                {
                    dot_start = lines - ActualLine;
                    dots = ActualLine*2 -1;
                    ctx.fillStyle="#000000";
                    for (let j=0;j<dots;j++)
                        {
                            ctx.fillRect(Width_Triangle+dot_start+j, ActualLine,2,2);
                        }
                }
       </script>

   </body>
</html>