index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Рисование линии</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="c1" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
style.css
#c1 {
width: 400px;
height: 200px;
border: 3px solid black;
margin: 40px;
background-image: url(setka.png);
}
script.js
var canvas = document.getElementById('c1'); // получим canvas
var ctx = canvas.getContext('2d');
// Рисуем линию
ctx.beginPath(); // начало пути для каждой новой линии, чтобы не повторялись стили
ctx.strokeStyle = "red";
ctx.lineWidth = "5"; // толщина линии
ctx.moveTo(100, 50); // координата начала линии
ctx.lineTo(150, 150); // координата конца линии
ctx.stroke(); // команда отрисовки
// Продолжим рисовать.
ctx.beginPath(); // начало пути для каждой новой линии, чтобы не повторялись стили
ctx.strokeStyle = "blue";
ctx.lineWidth = "20";
ctx.moveTo(200, 50);
ctx.lineTo(300, 50);
ctx.lineTo(300, 100); // рисует уголок
ctx.lineCap = "round"; // скругление конечных точек. Это нужно для соединения линий.
ctx.lineCap = "square"; // наращение прямоугольников
ctx.lineCap = "butt"; // значение по умолчанию для стыковки линий
ctx.stroke();
// Сотрем все линии.
ctx.clearRect(0, 0, 400, 200); // сотрем холст
// Нарисуем и зальем треугольник.
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(150, 50);
ctx.lineTo(200, 150);
//ctx.lineTo(50, 150); // допустим, последней линии не будет
ctx.lineWidth = "5";
ctx.lineCap = "butt";
ctx.closePath(); // закроем путь автоматически
ctx.fillStyle = "yellow";
ctx.stroke();
ctx.fill();
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Рисование линии</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="c1" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
style.css
#c1 {
width: 400px;
height: 200px;
border: 3px solid black;
margin: 40px;
background-image: url(setka.png);
}
script.js
var canvas = document.getElementById('c1'); // получим canvas
var ctx = canvas.getContext('2d');
// Рисуем линию
ctx.beginPath(); // начало пути для каждой новой линии, чтобы не повторялись стили
ctx.strokeStyle = "red";
ctx.lineWidth = "5"; // толщина линии
ctx.moveTo(100, 50); // координата начала линии
ctx.lineTo(150, 150); // координата конца линии
ctx.stroke(); // команда отрисовки
// Продолжим рисовать.
ctx.beginPath(); // начало пути для каждой новой линии, чтобы не повторялись стили
ctx.strokeStyle = "blue";
ctx.lineWidth = "20";
ctx.moveTo(200, 50);
ctx.lineTo(300, 50);
ctx.lineTo(300, 100); // рисует уголок
ctx.lineCap = "round"; // скругление конечных точек. Это нужно для соединения линий.
ctx.lineCap = "square"; // наращение прямоугольников
ctx.lineCap = "butt"; // значение по умолчанию для стыковки линий
ctx.stroke();
// Сотрем все линии.
ctx.clearRect(0, 0, 400, 200); // сотрем холст
// Нарисуем и зальем треугольник.
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(150, 50);
ctx.lineTo(200, 150);
//ctx.lineTo(50, 150); // допустим, последней линии не будет
ctx.lineWidth = "5";
ctx.lineCap = "butt";
ctx.closePath(); // закроем путь автоматически
ctx.fillStyle = "yellow";
ctx.stroke();
ctx.fill();
Комментариев нет:
Отправить комментарий