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.moveTo(50, 50); // смещаем перо для начала рисования, 50 и 50 - начальные координаты
ctx.quadraticCurveTo(100, 150, 300, 50); // 300 и 50 - конечные координаты, 100 и 150 - точка искривления
ctx.stroke();
*/
ctx.fillStyle = "red";
ctx.strokeStyle = "green";
ctx.moveTo(200, 50);
ctx.quadraticCurveTo(150, 0, 100, 50);
ctx.quadraticCurveTo(50, 150, 200, 180);
ctx.quadraticCurveTo(350, 150, 300, 50);
ctx.quadraticCurveTo(250, 0, 200, 50);
ctx.stroke();
ctx.fill();
canvas.onmousemove = function(event) {
var x = event.offsetX;
var y = event.offsetY;
ctx.clearRect(0, 0, 400, 200); // очистим canvas
// Нарисуем кривую
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(x, y, 50, 150);
ctx.stroke();
ctx.closePath();
}
<!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.moveTo(50, 50); // смещаем перо для начала рисования, 50 и 50 - начальные координаты
ctx.quadraticCurveTo(100, 150, 300, 50); // 300 и 50 - конечные координаты, 100 и 150 - точка искривления
ctx.stroke();
*/
ctx.fillStyle = "red";
ctx.strokeStyle = "green";
ctx.moveTo(200, 50);
ctx.quadraticCurveTo(150, 0, 100, 50);
ctx.quadraticCurveTo(50, 150, 200, 180);
ctx.quadraticCurveTo(350, 150, 300, 50);
ctx.quadraticCurveTo(250, 0, 200, 50);
ctx.stroke();
ctx.fill();
canvas.onmousemove = function(event) {
var x = event.offsetX;
var y = event.offsetY;
ctx.clearRect(0, 0, 400, 200); // очистим canvas
// Нарисуем кривую
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(x, y, 50, 150);
ctx.stroke();
ctx.closePath();
}
Комментариев нет:
Отправить комментарий