How to draw in web 2.0?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-15 05:14 出处：网络

I heard that drawing abilities will be supported by Web 2.0 Tried to find something in Internet about, nothing really clear. Could you please point me into something that allows (or will allow in fu

相关专题：drawing

I heard that drawing abilities will be supported by Web 2.0

Tried to find something in Internet about, nothing really clear. Could you please point me into something that allows (or will allow in future) to draw in HTML?

For example: I want to have ability draw few hexagons in diff开发者_开发问答erent color on the page.

Thanks.

P.S. Sorry if question is a little bit "stupid", but I can't make it more smart.

A quick exemple of what you want to do:

<html>
  <head>
    <title>Hexagon canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        //first let's get canvas HTML Element to draw something on it
        var canvas = document.getElementById('tutorial');
        //then let's 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's 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>

What you're talking about is most likely the HTML5 Canvas element

I suspect you've been hearing about the Canvas Element. You can get started with it here: http://en.wikipedia.org/wiki/Canvas_element

Good luck!