javascript

Canvas - line, рисуем линии


Canvas - line, рисуем линии

В данной статье я напишу как в элементе Canvas рисовать линии. Для того чтобы создать линию мы будем использовать методы moveTo(), lineTo(), и stroke().

Рисование линий (Draw Line)

function drawScene()
{
   var web_canvas = document.getElementById('drawScene');
   var web_context = web_canvas.getContext('2d');
   web_context.beginPath();
   web_context.moveTo(40,80);
   web_context.lineTo(40,200);
   web_context.lineTo(260,200);
   web_context.lineTo(260,80);
   web_context.stroke();
}

В результате мы получим:

Теги

Canvas - arc, рисуем дуги


Canvas - arc, рисуем дуги.

Для того чтобы нарисовать дугу в html5, нужно использовать метод arc() контекста. При рисования нужно определить центральную точку, радиус, начальный и конечный угол и направление дуги по часовой или против часовой стрелки.

Arc

Теги