HTML / Файл pr1.html
<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>Canvas. Основи. Лінії</title>
<link rel="stylesheet" href="pr1.css">
</head>
<body>
<canvas id="c1" width="400" height="200"></canvas>
<script src="pr1.js" ></script>
</body>
</html>
CSS / Файл pr1.cssctx.beginPath();
#c1 {
width: 400px;
height: 200px;
border: 3px solid black;
margin: 40px;
background-image: url(setka.png);
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
// перший червоний прямокутник
// ctx.fillRect(x, y, width, height)
ctx.fillStyle = 'red';
ctx.fillRect(100, 50, 150, 75);
// другий синій прямокутник
ctx.fillStyle = 'blue';
ctx.fillRect(150, 100, 100, 50);
// очистили область Canvas
ctx.clearRect(0,0, 400, 200);// зелена широка лінія по контуру
ctx.strokeStyle = "green";
ctx.lineWidth = "10";
// прямокутний контур
ctx.rect(50,10, 100, 100);
ctx.stroke();
// заливка прямокутникаctx.fillStyle = "orange";
ctx.fill();
Малюємо лінії
Одна лінія
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 = "square";
//ctx.lineCap = "butt";
ctx.stroke();
Трикутник
ctx.beginPath();
ctx.moveTo(50, 150);ctx.lineTo(150,50);
ctx.lineTo(200, 150);
ctx.lineWidth = "5";
ctx.lineCap = "butt";
ctx.fillStyle='yellow';
ctx.closePath();
ctx.stroke();
ctx.fill();
Малюємо коло і дуги
Колоvar pi = Math.PI;
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.fillStyle="yellow";
ctx.arc(150, 100, 75, 0, 2*pi, false );
//ctx.arc(x-центр, y-центр, радіус, початковий кут, кінцевий кут, напрямок закруглення );
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = "green";
ctx.fillStyle="pink";
ctx.arc(250, 100, 50, 0, 2*pi, false );
ctx.stroke();
ctx.fill();
Дуга
ctx.clearRect(0,0, 400, 200);
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.fillStyle="yellow";
ctx.arc(150, 100, 75, pi/2, pi, false );
ctx.stroke();ctx.fill();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = "green";
ctx.fillStyle="pink";
ctx.arc(250, 100, 50, 0, 2*pi/3, true );
ctx.stroke();
ctx.fill();
Немає коментарів:
Дописати коментар