بۇ يازمىنىڭ تېمىسى تازا گەۋدىلىك بولماي قالدى. دەرىسلىك دىيىشكە تىلىم بارمىدى، «لوپا ئەينەك ئۈنۈمى» دىيىش ئېنىق مۇۋاپىق ئەمەس. چۈنكى بۇ يازمىدا نوقۇل بىرەر ئۈنۈمدىن ھوزۇرلىنىشنى ئاساس قىلمايمىز، ئەكىسچە شۇنى چۆرىدىگەن ئاساستا، HTML5 نىڭ مۇھىم ئىلمىنىتلىرىدىن Canvas نىڭ بىر قىسىم ئىقتىدارلىرى بىلەن تونۇشۇپ چىقىمىز. خوش باشلاپ كىتەيلۇق.
HTML5 بىلەن ئازراق ئىتىشىپ باققانلار بىلىدۇكى بۇ Canvas دېگەن ئاجايىپ نەرسە. ئىككى ئۆلچەملىك كوردىنات بويىچە ھەرخىل شەكىللەرنى سىزىش ۋە بىر تەرەپ قىلىش، ھەرىكەت ئۈنۈملىرى ۋە كۆپ ۋاستە ئامىللىرىنى بىرتەرەپ قىلىش، ھەتتاكى ئۈچ ئۆلچەملىك كوردىنات(3D) بويىچە ستېرېئولۇق ئۈنۈملەر چىقىرىشقا بولىدۇ. تۆۋەندە Canvas نىڭ رەسىم بىرتەرەپ قىلىش ئىقتىدارىغا ئۈلگە قىلىپ، ئاددىيغىنە لوپا ئەينەك ئۈنۈمى چىقىرىپ باقايلى! ئۈنۈمىنى بۇ يەردىن كۆرۈڭ(رەسىمنى چەكسىڭىز بولىدۇ):كۆرۈش
ئەمەلىيەتتە قارىماققا قىزىقارلىق كۆرۈنگەن بۇ ئۈنۈمنى بىز ئاساسەن drawImage ئۇسسۇلى ئارقىلىقلار چىقىرالايمىز. رەسىم يۈزىدىكى خالىغان نوقتىنى چەكسەك، شۇ نوقتا ئەتىراپىدىكى مەلۇم دائىرە چوڭايتىلىپ، لوپا ئەينەك ھالىتىدە كۆرسىتىلىدۇ. بۇنىڭ ماھىيىتى ئىنتايىن ئاددىي: ئاۋۋال ماۋۇس بېسىلغان نوقتىنىڭ كوردىنات قىممىتىگە ئىرىشىمىز، ئاندىن «لوپا ئەينەك» نىڭ چوڭ كىچىكلىكىگە ئاساسەن، شۇ نوقتىنى چۆرىدەپ مۇۋاپىق دائىرىنىڭ رەسىمىنى كۆچۈرۈپ ئالىمىز، ئەڭ ئاخىردا drawImage ئۇسسۇلى ئارقىلىق ئىرىشكەن رەسىمنى «لوپا ئەينەك» چىقارماقچى بولغان Canvas ئۈستىگە سىزىپ بەرسەكلا بولىدۇ.
بۇ يەردە يەنە بىر مەسىلىگە چىتلىپ قالدۇق. «لوپا ئەينەك» ئادەتتە يۇمۇلاق بولىدۇ، دېمەك بۇ ئۈنۈممۇ چەمبەر شەكلىدە كۆرسىتىلىشى كېرەك، ئەپسۇس Canvas ئادەتتە رەسىمنى تىك تۆت بۇلۇڭ شەكلىدە كۆرسىتىپ بېرىدۇ. چەمبەر شەكلىدە كۆرسىتىش ئۈچۈن ئازراق ئەگرى يول مىڭىشقا توغرا كېلىدۇ. ئەمەلىيەتتە بىز پەقەت سىزىلغان رەسىم ئۈستىنى چەمبەر شەكلىدە كېسىۋالساقلا بولىدۇ. قانداق كېسىمىز؟ قايچا بىلەن ئەمەس. «لوپا ئەينەك» ئۈنۈمى چىقىرىلغان Canvas يۈزىدە چەمبەرسىمان بىر دائىرە بەلگىلەپ، دائىرە سىرتىدىكىلەرنى يۇشۇرۇپ قويساقلا بولىدۇ. ئادەتتە Canvas ئىچىدە context.clip() ئۇسسۇلى ئارقىلىق بەلگىلەنگەن دائىرە بويىچە رەسىمنى كېسىپ ئالىمىز، ھېچقانداق پارامىتىر بەلگىلەشنىڭ ھاجىتى يوق.
كودلىرى ئىزاھاتلار بىلەن تۆۋەندىكىدىكىدەك:
لوپا ئەينەك ئۈنۈمى
