Home >  > HTML5:ئولىمپىك بەلگىسى (تەجرىبە1)

HTML5:ئولىمپىك بەلگىسى (تەجرىبە1)

1

ئالدىنقى يازمىلىرىمىزدا HTML5 نىڭ Canvas ئىقتىدارىدىن پايدىلىنىپ رەسىم بىر تەرەپ قىلىش ھەققىدە توختالدۇق. بۈگۈندىن باشلاپ رەسمىي ھالدا ئويۇن ئېچىشنى ئاساس قىلغان، تۈرلۈك ھەرىكەت ئالگورىفمالىرى بىلەن تونۇشۇپ چىقىمىز ۋە ماس ھالدا مەشىق ئىشلەيمىز.ئىشتىياقى بارلار داۋاملىق كۇلۇبىمىزغا مەرھەمەت...ئاۋۋال پۈتكۈل مىسالنىڭ ئۈنۈمىنى كۆرەيلى: بۇيەردىن 
ئولىمپىك ھالقىسى ھەممىمىزگە تونۇشلۇق بولسا كېرەك. يەنى ئۆزئارا چېتىلغان بەش دانە بەش خىل رەڭدىكى چەمبەردىن تەركىب تاپقان. ئەلۋەتتە بۇنى رەسىم قوراللىرى بىلەن بىردەمدىلا لايىھەلەيمىز. بىراق بۇ يەردە مۇھىم بولىۋاتقىنى Html5 نىڭ ئىقتىدارى ئارقىلىق سىزىپ چىقىش.
ئىشنىڭ بېشىدا Canvas نىڭ كوردىنات سېستىمىسىنى بىر چۈشىنىۋالايلى!

canvas_cordinate

يۇقىرىقى رەسىمدە كۆرسىتىلگىنىدەك x,y باشلىنىش نوقتىسى دەل canvas نىڭ سول ئۈستى بۇلۇڭدىن باشلىنىدۇ. ئاندىن بەلگىلەنگەن قىممەت بويىچە x,y سان ئوقىنى بويلاپ ئۇزرايدۇ. مەسىلەن: (50,100) قىممىتى x=50, y=100 گە باراۋەر. يەنى canvas نىڭ سول ئۈستى بۇلۇڭدىن باشلاپ ئاستىغا 100 پىكىسىل، ئوڭ تەرەپكە 50 پىكىسىل كىلىدىغان نوقتىنى كۆرسىتىدۇ.
خوش كوردىنات سېستىمىسىنى چۈشۈنىۋالغاندىن كېيىن چەمبەر سىزىشقا باشلايمىز. Html5k نىڭ CanvasRenderingContext2D ئوبىكتىدا Canvas ئۈستىگە شەكىل سىزىدىغان بىر قىسىم فۇنكىسىيەلەر تەمىنلەنگەن. دېمەك، قانۇنىيەتلىك شەكىللەرنى سىزىشتا شۇ فۇنكىسىيەلەرنى ئىشلەتسەكلا بولىدۇ. مەسىلەن: چەمبەر سىزىش فۇنكىسىيەسىنىڭ گرامماتىكىسى مۇنداق..

arc(x,y,radius,bashlinishBulungi,axirlishisBulungi,teturYonilishmu)

يۇقىرىقى ئۇسسۇلدىن باشلىنىپ ئاۋۋال Canvas ئۈستىگە بەش دانە چەمبەر سىزىۋالىلى:



*****OlimpicCircle*****


Tor korgungiz HTML5 ni qollimaydu!