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