Как рисовать полигоны на холсте HTML5 с помощью функции JavaScript

Question

я хочу, чтобы пользователь мог щелкнуть где-нибудь на холсте, и на нем появится многоугольник

<DIV id="canvasarea" class="rounded">
    <CANVAS id="canvas" width="800px" height="800px"></CANVAS>
    </DIV>

Answer 1

Вот функция, которую я включил в объект, используя библиотеку mootools.Вы можете реализовать это и в простом javascript.ctx равен объекту canvas.getContext ('2d'), а n var определяет количество сторон для многоугольника, который мы хотим ... Надеюсь, вы поняли, решение требует только базовой математики.

Answer 2

Используйте библиотеку javascript, я бы сначала попытался обработать js - имейте в виду, что IE нужно обмануть в поддержку canvas.

Я не видел образец, который точно соответствует вашему запросу, но эти два должны дать вам хорошую отправную точку

http://processingjs.org/learning/basic/shapeprimitives

в тот же домен-а-выше / обучение / тема / continuouslines

здесь также есть отличный учебник по холсту - Google "Погружение в холст html5"

Answer 3

Отсюда: http://www.authorcode.com/draw-and-fill-a-polygon-and-triangle-in-html5/

Вы можете использовать метод lineTo ():

var objctx = canvas.getContext('2d');

objctx.beginPath();
objctx.moveTo(75, 50);
objctx.lineTo(175, 50);
objctx.lineTo(200, 75);
objctx.lineTo(175, 100);
objctx.lineTo(75, 100);
objctx.lineTo(50, 75);
objctx.closePath();
objctx.fillStyle = "rgb(200,0,0)";
objctx.fill();

Если вы не хотите заполнять многоугольник, используйте метод stroke() вместо fill()

Спасибо.

Answer 4

KineticJS - отличный способ быстро начать работу. Вот пример, который показывает, как нарисовать многоугольник на холсте:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-polygon-tutorial/

Определите ваш щелчок и запустите логику, представленную в примере.