По умолчания цвет всех нарисованных фигур - черный. Цвет линий и обводки задается через strokeStyle, цвет заливки через fillStyle.
Очистка холста осуществляется командой .clearRect
Первая линия с закругленными краями, вторая с квадратными, третья имеет дэфолтные настройки
По умолчанию линия завершается через butt. Если используютя круглые или квадратные концы линий, то длинна линии увеличиваетсяна толщину этой линии.
<script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // Первая линия context.beginPath(); // Начинает новый маршрут context.moveTo(50, 10); // Первая точка context.lineTo(830, 10); // Конечная точка context.lineWidth = 10; // Ширина линии context.strokeStyle = "#666"; // Цвет линии context.lineCap = "round"; // Закругляет концы линии context.stroke(); // Рисует линию // Вторая линия context.beginPath(); context.moveTo(50, 40); context.lineTo(830,40); context.lineWidth = 10; context.strokeStyle = "#666"; context.lineCap = "square"; // Концы линии квадратные context.stroke(); // Третья линия context.beginPath(); context.moveTo(50, 70); context.lineTo(830, 70); context.lineWidth = 10; context.strokeStyle = "#666"; context.lineCap = "butt"; context.stroke(); }; </script>
Можно нарисовать 3 вида прямоугольников. 1 - закрашенный. 2 - очищающая прямоугольная область. 3 - полый прямоугольник.
Прямоугольники рисуются по 2 точкам. Нужно задать координаты верхнего левого угла и нижнего правого угла.
Прямоугольники рисуются по 2 точкам. Нужно задать координаты верхнего левого угла и нижнего правого угла. Координаты нижнего правого угла задаются относительно верхнего правого.
<script> window.onload = function() { var canvas = document.getElementById("myCanvas3"); var context = canvas.getContext("2d"); context.beginPath(); context.fillStyle = "rgb(45, 50, 40)"; context.arc(150, 50, 45, 0, 2*Math.PI, true); context.fill(); // Заливка окружности context.beginPath(); context.arc(300, 50, 45, 0, 0.2*Math.PI, true); context.stroke(); // Отрисовывает окружность context.beginPath(); context.fillStyle = "rgb(100, 100, 100)"; context.arc(450, 50, 45, 0, 0.4*Math.PI, true); context.fill(); context.beginPath(); context.fillStyle = "rgba(25, 100, 20, 0.5)"; context.arc(650, 50, 45, 0, 2*Math.PI, true); context.fill(); context.beginPath(); context.fillStyle = "rgba(25, 100, 20, 0.5)"; context.arc(700, 50, 45, 0, 2*Math.PI, true); context.fill(); }; </script>
Для рисования окружностей применяется команда arc(ox, oy, radius, startAngle, endAngle, antiClockWise), где ox и oy — координаты центра, radius — радиус окружности, startAngle и endAngle — начальный и конечный углы (в радианах) для отрисовки окружности, а antiClockWise — направление движения при отрисовке (true для против часовой стрелке, false — против). Нетрудно сделать вывод, что с помощью arc() можно рисовать как круги и окружности, так и дуги и части окружности.
<script> window.onload = function() { var canvas = document.getElementById("myCanvas3"); var context = canvas.getContext("2d"); context.beginPath(); context.fillStyle = "rgb(45, 50, 40)"; context.arc(150, 50, 45, 0, 2*Math.PI, true); context.fill(); // Заливка окружности context.beginPath(); context.arc(300, 50, 45, 0, 0.2*Math.PI, true); context.stroke(); // Отрисовывает окружность context.beginPath(); context.fillStyle = "rgb(100, 100, 100)"; context.arc(450, 50, 45, 0, 0.4*Math.PI, true); context.fill(); context.beginPath(); context.fillStyle = "rgba(25, 100, 20, 0.5)"; context.arc(650, 50, 45, 0, 2*Math.PI, true); context.fill(); context.beginPath(); context.fillStyle = "rgba(25, 100, 20, 0.5)"; context.arc(700, 50, 45, 0, 2*Math.PI, true); context.fill(); }; </script>
<script> window.onload = function() { var canvas = document.getElementById("myCanvas4"); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(240, 60); context.lineTo(280, 20); context.lineTo(320, 60); context.lineTo(320, 100); context.lineTo(240, 100); context.closePath(); context.fillStyle = "#666"; context.fill(); context.beginPath(); context.moveTo(240, 60); context.lineTo(280, 20); context.lineTo(320, 60); context.lineTo(320, 99); context.lineTo(300, 99); context.lineTo(300, 70); context.lineTo(280, 70); context.lineTo(280, 99); context.lineTo(240, 99); context.closePath(); context.lineWidth = 1; context.strokeStyle = "#333"; context.stroke(); context.beginPath(); context.fillStyle = "rgb(100, 100, 100)"; context.moveTo(600, 50); context.arc(600, 50, 45, 0, 0.5*Math.PI, true); context.lineTo(600, 50); context.stroke(); }; </script>
Кривые Безье строятся то трем контрольным точкам. Для построения кривой используется метод .bezierCurveTo(x1, y1, x2, y2, x3, y3)
<script> window.onload = function() { var canvas = document.getElementById("myCanvas5"); var context = canvas.getContext("2d"); context.lineWidth = 1; context.beginPath(); context.bezierCurveTo(300, 20, 260, 80, 400, 20); context.bezierCurveTo(400, 20, 240, 110, 300, 20); context.fill(); context.lineWidth = 3; context.strokeStyle = "#e64e4e"; context.beginPath(); context.arc(500, 30, 24, 0, Math.PI, true); context.bezierCurveTo(476, 30, 470, 50, 524, 95); context.bezierCurveTo(528, 95, 575, 50, 572, 30); context.arc(548, 30, 24, 0, Math.PI, true); context.stroke(); }; </script>
Комментарии