All geek questions in one place

How to draw on the web 2.0?

I heard that drawing capabilities will be supported by Web 2.0

Tried to find something on the Internet, nothing really clear. Could you tell me what allows (or will allow in the future) to draw HTML?

For example: I want the ability to draw several hexagons of different colors on the page.

Thank.

PS Sorry if the question is a little "stupid", but I cannot make it more intelligent.

+3
source share
3 answers

A quick example of what you want to do:

<html>
  <head>
    <title>Hexagon canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        //first let get canvas HTML Element to draw something on it
        var canvas = document.getElementById('tutorial');
        //then let see if the browser supports canvas element
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');

            //Pick Hexagon color, this one will be blue
            ctx.fillStyle = "rgb(0, 0, 255)";
            //let start a path
            ctx.beginPath();
            //move cursor to position x=10 and y=60, and move it around to create an hexagon
            ctx.moveTo(10,60);
            ctx.lineTo(40,100);
            ctx.lineTo(80,100);
            ctx.lineTo(110,60);
            ctx.lineTo(80,20);
            ctx.lineTo(40,20);
            //fill it and you got your first Hexagon
            ctx.fill();

            //This one will be green, but we will draw it like the first one
            ctx.fillStyle = "rgb(0, 255, 0)";
            ctx.beginPath();
            ctx.moveTo(110,160);
            ctx.lineTo(140,200);
            ctx.lineTo(180,200);
            ctx.lineTo(210,160);
            ctx.lineTo(180,120);
            ctx.lineTo(140,120);
            ctx.fill();
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="300" height="300"></canvas>
  </body>
</html>
+4
source

What you say is most likely an HTML5 Canvas element

+4
source

, Canvas Element. : http://en.wikipedia.org/wiki/Canvas_element

!

+1

Source: https://habr.com/ru/post/1763502/

More articles:


All Articles