Построение простых фигур (прямые, окружности, прямоугольники и т.д.), задание цвета и заливка.

Общие настройки

По умолчания цвет всех нарисованных фигур - черный. Цвет линий и обводки задается через strokeStyle, цвет заливки через fillStyle.

.strokeStyle = "#666";
.fillStyle = "rgba(25, 100, 20, 0.5)";

Очистка холста осуществляется командой .clearRect

.clearRect(50, 50, 250, 250); // Очистка заданной области
.clearRect(0, 0, canvas.width, canvas.height); // Очиста всего холста

Линии

Первая линия с закругленными краями, вторая с квадратными, третья имеет дэфолтные настройки

По умолчанию линия завершается через 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>

Сложные фигуры

Для рисования сложных фигур используются следующие команды:

.beginPath() - начало рисование фигуры
.moveTo(x, y) - команда для задания певой точки
.lineTo(x, y) - команда для рисования линии
.closePath() - завершение рисования фигуры
.fill() заполнить фигуру цветом
.stroke() нарисовать контур фигуры
<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>

Комментарии  

0 #1 profile 31.10.2018 11:09
Need cheap hosting? Try webhosting1st, just $10 for an year.

Цитировать

Добавить комментарий


Защитный код
Обновить