Рисование составных фигур Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.Д.)
|
Методы |
Описание |
|
moveTo(x,y) |
Устанавливает координаты точки, из которой начнется рисование следующего объекта. |
|
lineTo(x,y) |
Рисует прямую линию. |
|
arc(x,y,радиус,нач_угол,конеч_угол) |
Рисует круг. Угол необходимо задавать в радианах, а не в градусах (радианы=(Math.PI/180)*градусы). |
|
rect(x, y, ширина, высота) |
Рисует прямоугольник. |
Код программы рисования заключается в «логические скобки» состоящие из функций beginPath(); и closePath();
Структура программы выглядит следующим образом
beginPath(); //Начало рисования
/* Простые объекты помещаются здесь */
closePath(); // Автоматически завершает фигуру (соединяет конечную точку с начальной)
//Теперь необходимо вызвать один из методов для рисования фигуры определенной выше
stroke(); //нарисует фигуру не закрашенной
fill(); //нарисует фигуру закрашенной
Пример рисования треугольника
<html>
<body>
<canvas id='draw' style='border:1px solid' width='300' height='200'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.beginPath(); //Начало рисования
x.moveTo(20,20);// координаты точки, из которой начнется рисование
x.lineTo(70,70); // Рисует прямую линию.
x.lineTo(20,70);
x.closePath(); //Конец рисования
x.fill(); //закрашивание
</script>
</body>
</html>
Другой пример – рисование дуги
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
context.strokeStyle = "black";
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>
