Context.stroke();//метод stroke делает нарисованные контуры видимыми.

Что значит

Arc(x, y, radius, startAngle, endAngle, counterClockwise); ?

Посмотрите на схему, дуга - это часть окружности воображаемого круга, этот воображаемый круг можно определить координатами x, y и радиусом.

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

И последним аргументом мы передаем направление рисования, по умолчанию это false, что означает что рисоваться будет по часовой стрелке (необязательный параметр).

С помощью метода arc() можно нарисовать полную окружность

< html>

< body>

< canvas id='draw' style='border: 1px solid' width='200' height='200'> < /canvas>

< script type='text/javascript'>

var x1=(Math.PI/180)*0;

var x2=(Math.PI/180)*360;

var canvas=document.getElementById(" draw" )

var x=canvas.getContext(" 2d" );

x.beginPath();

x.arc(30, 30, 20, x1, x2);

x.moveTo(100, 100);

x.rect(70, 50, 70, 70);

x.fill();

< /script>

< /body>

< /html>

 

Для раскрашивания нарисованных в canvas фигур предусмотрены свойства: fillStyle и strokeStyle. Свойство fillStyle используется для применения цвета к закрашенным, а strokeStyle для применения цвета к не закрашенным фигурам.

< html>

< body>

< canvas id='draw' width='300' height='200' style='border: 1px solid'> < /canvas>

< script type='text/javascript'>

var canvas=document.getElementById(" draw" )

var x=canvas.getContext(" 2d" );

x.fillStyle=" green";

x.fillRect(10, 40, 65, 65);

x.strokeStyle=" #FF45FF";

x.strokeRect(100, 40, 65, 65);

x.fillStyle=" rgb(255, 73, 73)";

x.fillRect(190, 40, 65, 65);

< /script>

< /body>

< /html>

 

 

Как видно из предыдущего примера цвета могут задаются так же как для шрифта.

В canvas цвет может задавать с помощью rgba (задается цвет и прозрачность элемента).

< html>

< body>

< canvas id='draw' width='270' height='150' style='border: 1px solid; '> < /canvas>

< script type='text/javascript'>

var canvas=document.getElementById(" draw" )

var x=canvas.getContext(" 2d" );

x.fillStyle=" rgba(0, 0, 0, 0.5)";

x.fillRect(10, 40, 65, 65);

x.fillStyle=" rgba(0, 0, 0, 0.1)";

x.fillRect(100, 40, 65, 65);

x.fillStyle=" rgba(0, 0, 0, 1)";

x.fillRect(190, 40, 65, 65);

< /script>

< /body>

< /html>

 

Здесь используются две знакомые нам функции: fillStyle - задает цвет и прозрачность кисти рисования и fillRect - рисует прямоугольник с заданными координатами и размерами.

Линии

Перемещение пера в точку с координатами x, y без прорисовки линии выполняется методом moveTo(x, y).

Перемещение пера в точку с координатами x, y с прорисовкой линии выполняется методом lineTo(x, y).

В HTML имеются несколько свойств для оформления линий нарисованных с помощью метода lineTo(), это lineWidth, lineCap, lineJoin.

С помощью свойства lineWidth можно установить ширину линии (по умолчанию линии имеют ширину 1 пиксель)

< html>

< body>

< canvas id='draw' width='260' height='120' style='border: 1px solid; padding: 10px; '> < /canvas>

< script type='text/javascript'>

var canvas=document.getElementById(" draw" )

var x=canvas.getContext(" 2d" );

//Рисуем линию толщиной 3 пикселя

x.beginPath();

x.moveTo(10, 10);

x.lineWidth=3;

x.lineTo(200, 10);

x.stroke();

//Рисуем линию толщиной 10 пикселей

x.beginPath();

x.moveTo(10, 40);

x.lineWidth=10;

x.lineTo(200, 40);

x.stroke();

//Рисуем линию толщиной 1 пиксель

x.beginPath();

x.moveTo(10, 70);

x.lineWidth=1;

x.lineTo(200, 70);

x.stroke();

//Рисуем линию толщиной 6 пикселей

x.beginPath();

x.moveTo(10, 100);

x.lineWidth=6;

x.lineTo(200, 100);

x.stroke();

< /script>

< /body>

< /html>

С помощью свойства lineCap можно оформлять кончики линии

< html>

< body>

< canvas id='draw' width='230' height='90' style='border: 1px solid; padding: 20px'> < /canvas>

< script type='text/javascript'>

var canvas=document.getElementById(" draw" )

var x=canvas.getContext(" 2d" );

//Нарисуем линию с закругленным кончиком

X.beginPath()

x.moveTo(10, 10);

x.lineWidth=10;

x.lineCap='round';

x.lineTo(200, 10);

x.stroke();

//Нарисуем линию с квадратным кончиком

x.beginPath();

x.moveTo(10, 40);

x.lineWidth=10;

x.lineCap='square';

x.lineTo(200, 40);

x.stroke();

//Нарисуем линию со стандартным кончиком

x.beginPath();

x.moveTo(10, 70);

x.lineWidth=10;

x.lineCap='butt';

x.lineTo(200, 70);

x.stroke();

< /script>

< /body>

< /html>

⇐ Предыдущая12345Следующая ⇒

Поделиться: