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');
var pi = Math.PI;
ctx.beginPath();
ctx.lineWidth = 5; // ширина линии
ctx.strokeStyle = "red"; // цвет линии
ctx.fillStyle = "yellow"; // цвет заливки
// ctx.arc(150, 100, 75, 0, pi/2, true); // зададим координаты круга, радиус, начальный и конечный угол
// Рисуем: false - по часовой стрелке, true - против часовой стрелки.
// У нас полуится дуга.
// ctx.arc(150, 100, 75, 0, pi, true); // получается полукруг
// ctx.arc(150, 100, 75, 0, 3*pi/2, true); // 270 градусов
ctx.arc(150, 100, 75, 0, 2*pi, false); // ПОЛНАЯ ОКРУЖНОСТЬ
ctx.stroke(); // выполним обводку
ctx.fill(); // выполним заливку
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "green";
ctx.fillStyle = "pink";
ctx.arc(270, 100, 75, 0, 2*pi, false);
ctx.stroke();
ctx.fill();
// ctx.arc(x, y, radius, angle_start, angle_end, anticlockwise); // angle- radian
ctx.clearRect(0, 0, 400, 200); // сотрем все
canvas.onmousemove = function(event) {
var x = event.offsetX; // узнаем координату x
var y = event.offsetY; // узнаем координату x
ctx.clearRect(0, 0, 400, 200); // сотрем на свякий случай предыдущую окружность
ctx.beginPath();
var radius = Math.pow(Math.pow(x-200, 2)+Math.pow(y-100, 2),0.5)
ctx.arc(200, 100, radius, 0, 2*pi, false);
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');
var pi = Math.PI;
ctx.beginPath();
ctx.lineWidth = 5; // ширина линии
ctx.strokeStyle = "red"; // цвет линии
ctx.fillStyle = "yellow"; // цвет заливки
// ctx.arc(150, 100, 75, 0, pi/2, true); // зададим координаты круга, радиус, начальный и конечный угол
// Рисуем: false - по часовой стрелке, true - против часовой стрелки.
// У нас полуится дуга.
// ctx.arc(150, 100, 75, 0, pi, true); // получается полукруг
// ctx.arc(150, 100, 75, 0, 3*pi/2, true); // 270 градусов
ctx.arc(150, 100, 75, 0, 2*pi, false); // ПОЛНАЯ ОКРУЖНОСТЬ
ctx.stroke(); // выполним обводку
ctx.fill(); // выполним заливку
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "green";
ctx.fillStyle = "pink";
ctx.arc(270, 100, 75, 0, 2*pi, false);
ctx.stroke();
ctx.fill();
// ctx.arc(x, y, radius, angle_start, angle_end, anticlockwise); // angle- radian
ctx.clearRect(0, 0, 400, 200); // сотрем все
canvas.onmousemove = function(event) {
var x = event.offsetX; // узнаем координату x
var y = event.offsetY; // узнаем координату x
ctx.clearRect(0, 0, 400, 200); // сотрем на свякий случай предыдущую окружность
ctx.beginPath();
var radius = Math.pow(Math.pow(x-200, 2)+Math.pow(y-100, 2),0.5)
ctx.arc(200, 100, radius, 0, 2*pi, false);
ctx.stroke();
ctx.fill();
}
Комментариев нет:
Отправить комментарий