Рисование прямоугольников
|
Метод |
Описание |
|
fillRect(x,y,ширина,высота) |
Рисует закрашенный прямоугольник. x,y- координаты левого верхнего угла |
|
strokeRect(x,y,ширина,высота) |
Рисует не закрашенный прямоугольник. |
|
clearRect(x,y,ширина,высота) |
Очищает указанную зону делая ее полностью прозрачной. |
Обратите внимание: параметры x и y задают величину смещения прямоугольника по горизонтали (x) и вертикали (y) от верхнего левого угла холста в пикселях.
<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.fillRect(50,40,55,55);
x.strokeRect(150,70,55,55);
x.clearRect(68,57,20,20);
</script>
</body>
</html>
Объяснение примера:
var canvas=document.getElementById("draw") - находим нужный холст;
var x=canvas.getContext("2d") - обращаемся ко встроенному объекту, который содержит различные методы для рисования (первые два шага являются стандартными для рисования любого объекта в canvas);
x.fillRect(50,40,55,55) - рисуем закрашенный прямоугольник;
x.strokeRect(150,70,55,55) - рисуем не закрашенный прямоугольник;
x.clearRect(68,57,20,20) - очищаем зону в закрашенном прямоугольнике
Рисование составных фигур Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.Д.)
|
Методы |
Описание |
|
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");