JavaScript арқылы canvas желісінде сызу
Қарапайымнан бастайық - сызық сызудан. Бұл қалай жасалатынын түсіну үшін, өзіңізде қағаз парағы мен қалам бар деп елестетіңіз. Сіз осы парақта сызуға боласыз, немесе сызбай-ақ қаламды қажетті нүктеге жылжытуға боласыз.
JavaScript те солай жұмыс істейді: оның қаламы (немесе сызу қаламы) бар,
сіз оны moveTo әдісі арқылы қажетті жерге жылжытуға боласыз,
ал сызу үшін lineTo әдісін қолдануға болады.
Екі әдіс параметр ретінде қалам ұшының жылжитын нүктесін қабылдайды - бірінші параметр
көлденең координат, екіншісі - тік координат. Координат басы - 0,
0 нүктесі - элементтің жоғарғы сол жақ бұрышы.
Қалам қажетті нүктеге жылжыған кезде -
moveTo әдісі жай жылжытады, ал
lineTo жылжыту процесінде қаламның ағымдағы орнынан
ол жылжитын нүктеге дейін сызық сызады.
Алайда, егер жоғарыдағы кодты іске қоссаңыз -
ештеңе болмайды: тағы екі команда жазу керек: бірінші команда beginPath
сызық сызуды бастамас бұрын көрсетілуі керек, ал екінші команда stroke
сызық сызылуы үшін moveTo және lineTo комбинацияларының бәрінен кейін шақырылуы керек.
Сонымен, сызық сызу үшін жұмыс істейтін код жазайық:
Сызық сызайық
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Құс сызайық
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Үшбұрыш сызайық
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Шаршы сызайық
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Фигураларды жабу
Жабық фигураны сызу үшін барлық сызықтарды салу міндетті емес -
соңғы сызық автоматты түрде сызылып, фигураны жаба алады.
Ол үшін stroke әдісінен бұрын closePath әдісін шақыру керек.
Бұл әдіс фигураны жабуға тырысады, соңғы нүктеден бастапқы нүктеге түзу сызық сызады. Егер фигура бұрыннан жабылған болса немесе жай нүкте болса, онда әдіс ештеңе жасамайды.
closePath қолданып, үшбұрыш сызайық:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - бұл қадамды өткізіп жіберіңіз
ctx.closePath();
ctx.stroke();
:
Фигураларды бояу
stroke әдісінің орнына fill әдісін қолдануға болады - бұл ретте фигура міндетті түрде
толығымен жабылуы шарт емес - ол боялады:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - бұл қадамды өткізіп жіберіңіз
//ctx.closePath(); - және бұны да
ctx.fill();
:
