HTML5 рисование на Canvas

Информация

• https://www.w3schools.com (opens new window)
• PixiJS (opens new window)
• three.js (opens new window)

HTML

<canvas id="canvas" style="display: block; border: 2px solid black;">
	Your browser is not supported
</canvas>

Основы

Выборка и получение контекста

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;
//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight;

Общие свойства

ctx.fillStyle = 'yellowgreen';
ctx.strokeStyle = 'black';
ctx.lineWidth = 4;

Объекты

Rectangle

ctx.fillRect(0,0,100,100);   // fill
ctx.strokeRect(0,0,100,100); // stroke

Arc

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();   // fill
ctx.stroke(); // stroke

arc()

• 1 - координаты центра окружности (x)
• 2 - координаты центра окружности (y)
• 3 - радиус
• 4 - start angle (справа)
• 5 - end angle (360deg = pi*2)
• 6 - рисование по часовой (false) / против (true) часовой стрелки

Line, Path

ctx.beginPath();

ctx.moveTo(100, 100);
ctx.lineTo(100, 50);
ctx.lineTo(200, 100);
ctx.closePath();

ctx.moveTo(10, 10);
ctx.lineTo(70, 10);
ctx.lineTo(10, 70);

ctx.fill();
ctx.stroke();

Text

ctx.textAlign = 'center';
ctx.font = '22px Arial';
ctx.fillText('Hello World', canvas.width/2, canvas.height/2); // по центру