Как нарисовать в веб 2.0? - PullRequest
Новая
       27

Как нарисовать в веб 2.0?

3 голосов
/ 06 сентября 2010

Я слышал, что возможности рисования будут поддерживаться Web 2.0

Пытался что-то найти в интернете, ничего толком не понятно. Не могли бы вы указать мне на то, что позволяет (или позволит в будущем) рисовать в HTML?

Например: я хочу иметь возможность рисовать несколько шестиугольников разного цвета на странице.

Спасибо.

P.S. Извините, если вопрос немного "глупый", но я не могу сделать его более умным.

Ответы [ 3 ]

4 голосов
/ 06 сентября 2010

Быстрый пример того, что вы хотите сделать: 

<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>
4 голосов
/ 06 сентября 2010

То, о чем вы говорите, это, скорее всего, элемент HTML5 Canvas

1 голос
/ 06 сентября 2010

Я подозреваю, что вы слышали об элементе Canvas.Начать можно здесь: http://en.wikipedia.org/wiki/Canvas_element

Удачи!

...