{"id":457318,"date":"2025-04-25T09:00:28","date_gmt":"2025-04-25T09:00:28","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=457318"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=457318","title":{"rendered":"<span>\u041a\u0430\u043a Canvas \u0443\u043a\u0440\u0430\u0441\u0438\u043b QIC<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0412\u0438\u0433\u0435\u043d \u041c\u043e\u0432\u0441\u0438\u0441\u044f\u043d, \u044f Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 QIC digital hub. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u044b \u0432\u043d\u0435\u0434\u0440\u0438\u043b\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e Canvas, \u043a\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043e\u043d \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0440\u0435\u0448\u0430\u0442\u044c, \u0447\u0442\u043e \u0443\u0436\u0435 \u0443\u0441\u043f\u0435\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u043a\u0430\u043a\u0438\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043b\u0430\u043d\u044b \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435.<\/p>\n<p>\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u043c\u043e\u0451\u043c \u0434\u043e\u043a\u043b\u0430\u0434\u0435 \u0441 QIC Tech Meetup, \u043f\u043e\u043b\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043d\u0430 <a href=\"https:\/\/www.youtube.com\/watch?v=xscjFa8UjAs\" rel=\"noopener noreferrer nofollow\">YouTube<\/a>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u043e, Canvas \u2014\u00a0 \u044d\u0442\u043e \u00ab\u0445\u043e\u043b\u0441\u0442\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u0434\u0430\u0432\u0430\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0431\u0443\u0434\u0443 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 <a href=\"https:\/\/qicconf.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043d\u0438\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Canvas. <\/p>\n<p>*\u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u041d\u0430\u0437\u0430\u0434\u00bb \u2014 \u0434\u043b\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u0441\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.\u00a0<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0430\u0447\u043d\u0451\u043c \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0432 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0438\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Canvas.<\/p>\n<h3>\u041f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 Canvas: \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h3>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Canvas, \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u0431\u0438\u0437\u043d\u0435\u0441\u0430: \u00ab\u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043e\u043b\u0433\u043e, \u044d\u0442\u043e \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439\u00bb.<\/p>\n<p>\u0412 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0438\u0434\u0435\u044f: \u00ab\u0427\u0442\u043e, \u0435\u0441\u043b\u0438 \u0441\u0436\u0438\u043c\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435?\u00bb. \u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u043e\u0433 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0438\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u043b\u0441\u044f Canvas.<\/p>\n<pre><code class=\"javascript\">export const compressImageFile = (   imageFile,   imageQuality = 0.7,   maxWidth = 800,   maxHeight = 600 ) =&gt; {   return new Promise((resolve, reject) =&gt; {     const img = new Image()     const objectURL = URL.createObjectURL(imageFile)     img.src = objectURL     img.onload = () =&gt; {       const canvas = document.createElement('canvas')       let width = img.width       let height = img.height       if (width &gt; height) {         if (width &gt; maxWidth) {           height *= (maxWidth \/ width)           width = maxWidth         }       } else {         if (height &gt; maxHeight) {           width *= (maxHeight \/ height)           height = maxHeight         }       }       canvas.width = width       canvas.height = height       const ctx = canvas.getContext('2d')       ctx.drawImage(img, 0, 0, width, height)       const type = imageFile.type       canvas.toBlob((blob) =&gt; {         const fileName = imageFile.name         const compressedFile = new File([blob], fileName, {           lastModified: Date.now(),           type         })         URL.revokeObjectURL(objectURL)         resolve(compressedFile)       }, type, imageQuality)     }     img.onerror = error =&gt; {       URL.revokeObjectURL(objectURL)       reject(error)     }   }) }<\/code><\/pre>\n<ol>\n<li>\n<p>\u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0431\u0435\u0440\u0451\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0438\u0437 \u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 objectURL \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 Image.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 (maxWidth, maxHeight), \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043d\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0421anvas.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e canvas.toBlob \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f Blob \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c (imageQuality), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 File.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0436\u0430\u0442\u044b\u0439 (\u0438 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u043d\u044b\u0439) \u0444\u0430\u0439\u043b, \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0438\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044e.<\/p>\n<\/li>\n<\/ol>\n<p>\u041a\u0430\u043a\u0438\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b? \u0412 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u0438\u043b\u043e \u043f\u043e\u0447\u0442\u0438 3 \u041c\u0411, \u0430 \u043f\u043e\u0441\u043b\u0435 \u0441\u0436\u0430\u0442\u0438\u044f \u0441\u0442\u0430\u043b\u043e \u0432\u0441\u0435\u0433\u043e 49 \u041a\u0411. \u0422\u043e \u0435\u0441\u0442\u044c \u0444\u0430\u0439\u043b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 57 \u0440\u0430\u0437! \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0441\u043b\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 40 \u041a\u0411, \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u0443\u0436\u0435 \u043d\u0435 \u0432\u044b\u0439\u0434\u0435\u0442, \u043d\u043e \u0434\u0430\u0436\u0435 \u0442\u0430\u043c \u0437\u0430\u043c\u0435\u0442\u043d\u0430 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u044f. \u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u0430\u043a\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0441 16-18 \u0441\u0435\u043a\u0443\u043d\u0434 \u0434\u043e 2.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 vue\u00a0 \u2014 <a href=\"https:\/\/github.com\/venmovs\/qic_serbian_conference\/blob\/main\/src\/pages\/compress-image\/CompressImage.vue\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0436\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435:<\/p>\n<ol>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435: <a href=\"https:\/\/qicconf.netlify.app\/\" rel=\"noopener noreferrer nofollow\">https:\/\/qicconf.netlify.app\/<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u0442\u0435 \u201c<a href=\"https:\/\/qicconf.netlify.app\/compress-image\" rel=\"noopener noreferrer nofollow\">Compress Image<\/a>\u201d<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4bd\/e12\/ec7\/4bde12ec71f8de9a52db5d969187f29f.png\" width=\"2500\" height=\"1392\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/4bd\/e12\/ec7\/4bde12ec71f8de9a52db5d969187f29f.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4bd\/e12\/ec7\/4bde12ec71f8de9a52db5d969187f29f.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h3>\u0412\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 Canvas: \u0433\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u00a0<\/h3>\n<p>\u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u0430 \u0438\u0434\u0435\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Canvas \u0434\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u043b\u0438 \u0441\u043a\u043e\u0440\u043e\u0442\u0430\u0442\u044c \u0432\u0440\u0435\u043c\u044f, \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u043f\u0440\u043e\u043f\u0430\u0434\u0451\u0442 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442. \u0412\u0435\u0434\u044c \u0447\u0430\u0441\u0442\u043e, \u043a\u043e\u0433\u0434\u0430 \u0441\u0432\u044f\u0437\u044c \u043e\u0431\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0432\u0438\u043d\u0438\u0442 \u0432 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438\u043b\u0438 \u0441\u0430\u043c \u0441\u0435\u0440\u0432\u0438\u0441. \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043c\u0438\u043d\u0438-\u0438\u0433\u0440\u0430 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u00ab\u0441\u043c\u044f\u0433\u0447\u0438\u0442\u044c\u00bb \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435 \u0438 \u0443\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>\u0412 \u043c\u043e\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u2014 \u044d\u0442\u043e \u0438\u0433\u0440\u0430, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043c\u0430\u0448\u0438\u043d\u043e\u0439 \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0435\u0451 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438.\u00a0 \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e <a href=\"https:\/\/qicconf.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0435<\/a> (\u0432\u043a\u043b\u0430\u0434\u043a\u0430 Game).<\/p>\n<pre><code class=\"xml\"> &lt;canvas         ref=\"canvasRef\"         class=\"game-canvas\"         :width=\"canvasSize.width\"         :height=\"canvasSize.height\"     \/&gt;<\/code><\/pre>\n<ol>\n<li>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;canvas&gt; \u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0441 canvasRef, \u0447\u0442\u043e\u0431\u044b \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443 2D-\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 (canvasContext).<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c canvasSize, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043a\u0440\u0430\u043d\u0430 (\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432).<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442:<\/p>\n<pre><code class=\"typescript\">  const context = (canvasContext.value =   canvasRef.value!.getContext('2d')!);<\/code><\/pre>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c 2d-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 (canvasContext.value), \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439.<\/p>\n<p>\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0438\u0433\u0440\u044b (gameLoop) \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0447\u0438\u0449\u0430\u0435\u043c Canvas, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043d\u0430\u0441\u043b\u0430\u0438\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<pre><code class=\"typescript\"> const clearCanvas = () =&gt; {       canvasContext.value!.clearRect(           0,           0,           canvasContext.value!.canvas.width,           canvasContext.value!.canvas.height       );     };<\/code><\/pre>\n<p><strong>2.1. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b<\/strong><\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0438 \u0438 \u0434\u043e\u0440\u043e\u0433\u0430. \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043c\u0430\u0448\u0438\u043d.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/878\/10d\/c35\/87810dc359e7191ef6bae0fcce56f656.png\" width=\"1120\" height=\"492\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/878\/10d\/c35\/87810dc359e7191ef6bae0fcce56f656.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/878\/10d\/c35\/87810dc359e7191ef6bae0fcce56f656.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<ol>\n<li>\n<p>\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430: \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f CanvasRenderingContext2D, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u00ab\u0437\u043d\u0430\u043b\u00bb, \u0433\u0434\u0435 \u0441\u0435\u0431\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f Image, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a (imageSrc). \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u044b \u0437\u0430\u0434\u0430\u0451\u043c width \u0438 height \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430, \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0439 (CAR_SCALE_MOB \u0438 CAR_SCALE).<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 move(x, y): \u043c\u0435\u043d\u044f\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043c\u0430\u0448\u0438\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0434\u0432\u0438\u0433\u0430\u043b\u0430\u0441\u044c \u0438\u043b\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0432 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 draw(): \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 context.drawImage(&#8230;) \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043d\u0430 Canvas.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"typescript\">class Car {   context: CanvasRenderingContext2D;   x: number;   y: number;   width = 0;   height = 0;   velocityX = 0;   speed = PLAYER_CAR_SPEED;   friction = PLAYER_CAR_FRICTION;   image: HTMLImageElement;    constructor (context: CanvasRenderingContext2D, imageSrc: string, isMobile: boolean) {     this.context = context;     this.x = 0;     this.y = 0;     this.image = new Image();     this.image.src = imageSrc;      this.image.onload = () =&gt; {       const scale = isMobile ? CAR_SCALE_MOB : CAR_SCALE;       this.width = this.image.width * scale;       this.height = this.image.height * scale;     };   } move (x: number, y: number): void {     this.x = x;     this.y = y;   }    draw (): void {     if (this.width &amp;&amp; this.height) {       this.context.drawImage(this.image, this.x, this.y, this.width, this.height);     }   } }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0434\u043e\u0440\u043e\u0433\u0438 <code>drawRoad<\/code><\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/72f\/de0\/3a4\/72fde03a48c881a3d207bcc7e6dcb037.png\" width=\"959\" height=\"713\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/72f\/de0\/3a4\/72fde03a48c881a3d207bcc7e6dcb037.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/72f\/de0\/3a4\/72fde03a48c881a3d207bcc7e6dcb037.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<ol>\n<li>\n<p>\u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0444\u043e\u043d \u0441\u0432\u0435\u0442\u043b\u043e-\u0441\u0435\u0440\u044b\u043c (#f1f4f6), \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u00ab\u0434\u043e\u0440\u043e\u0436\u043d\u043e\u0435\u00bb \u043f\u043e\u043b\u043e\u0442\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0438\u0441\u0443\u0435\u043c \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e setLineDash.<\/p>\n<\/li>\n<li>\n<p>roadOffset \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043b\u0438\u043d\u0438\u044f \u00ab\u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u043b\u0430\u0441\u044c\u00bb \u0432\u043d\u0438\u0437, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u044d\u0444\u0444\u0435\u043a\u0442 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\"> const drawRoad = () =&gt; {       const context = canvasContext.value!;       const roadWidth = context.canvas.width;        context.fillStyle = '#f1f4f6';       context.fillRect(0, 0, roadWidth, context.canvas.height);        roadOffset.value =           (roadOffset.value + gameSpeed.value + 1) % (ROAD_LINE_HEIGHT + ROAD_GAP_HEIGHT);        context.strokeStyle = '#5927ff';       context.lineWidth = ROAD_LINE_WIDTH;       context.setLineDash([ROAD_LINE_HEIGHT, ROAD_GAP_HEIGHT]);       context.beginPath();       context.moveTo(roadWidth \/ 2, roadOffset.value - (ROAD_LINE_HEIGHT + ROAD_GAP_HEIGHT));       context.lineTo(roadWidth \/ 2, context.canvas.height);       context.stroke();     };<\/code><\/pre>\n<p><strong>2.2. \u041f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u0430\u0434\u0440\u0435 <\/strong><code><strong>gameLoop<\/strong><\/code><\/p>\n<pre><code class=\"typescript\"> const gameLoop = () =&gt; {       clearCanvas();       drawRoad();       updateEnemyCars();       isMobile.value ? updatePlayerCarInMobile() : updatePlayerCar();       handleCollisions();       requestAnimationFrame(gameLoop);     };<\/code><\/pre>\n<ol>\n<li>\n<p><code>clearCanvas()<\/code>: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0447\u0438\u0441\u0442\u0438\u043c \u0445\u043e\u043b\u0441\u0442.<\/p>\n<\/li>\n<li>\n<p><code>drawRoad()<\/code>: \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0444\u043e\u043d\u043e\u0432\u0443\u044e \u0434\u043e\u0440\u043e\u0433\u0443.<\/p>\n<\/li>\n<li>\n<p><code>updateEnemyCars()<\/code>: \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043c\u0430\u0448\u0438\u043d\u044b-\u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u043e\u0432 \u0432\u043d\u0438\u0437 \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c gameSpeed \u0438 \u0441\u043d\u043e\u0432\u0430 \u0438\u0445 \u0440\u0438\u0441\u0443\u0435\u043c.<\/p>\n<\/li>\n<li>\n<p><code>updatePlayerCar()<\/code> \u0438\u043b\u0438 <code>updatePlayerCarInMobile()<\/code>: \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u0430\u0448\u0438\u043d\u043e\u0439 \u0438\u0433\u0440\u043e\u043a\u0430 (\u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u0432\u043e\u0434\u0430 \u2014 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u0438\u043b\u0438 \u0434\u0436\u043e\u0439\u0441\u0442\u0438\u043a).<\/p>\n<\/li>\n<li>\n<p><code>handleCollisions()<\/code>: \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430 \u0441 \u0432\u0440\u0430\u0436\u0435\u0441\u043a\u0438\u043c\u0438 \u043c\u0430\u0448\u0438\u043d\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p><code>requestAnimationFrame(gameLoop)<\/code>: \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c gameLoop \u0434\u043b\u044f \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 ~60 \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443.<\/p>\n<\/li>\n<\/ol>\n<p><strong>2.3. \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439 <\/strong><code>handleCollisions<\/code><\/p>\n<pre><code class=\"typescript\">const handleCollisions = () =&gt; {   enemyCars.value.forEach((enemyCar) =&gt; {     const player = playerCar.value!;     const hasCollisionX =         (enemyCar.x &gt; player.x &amp;&amp; enemyCar.x &lt; player.x + player.width) ||         (enemyCar.x + enemyCar.width &gt; player.x &amp;&amp;             enemyCar.x + enemyCar.width &lt; player.x + player.width);     const hasCollisionY = enemyCar.y + enemyCar.height &gt; player.y;     if (hasCollisionX &amp;&amp; hasCollisionY) {       if (window.navigator &amp;&amp; window.navigator.vibrate) {         window.navigator.vibrate(200);       }       gameSpeed.value = 0;       crashMessage.value =           'Don\\'t worry, we cover such cases with insurance.';     }   }); };<\/code><\/pre>\n<ol>\n<li>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u044e\u0442\u0441\u044f \u043b\u0438 \u043c\u0430\u0448\u0438\u043d\u044b \u043f\u043e \u043e\u0441\u0438 X (\u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432).<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043d\u0435 \u043d\u0430\u043a\u0440\u044b\u043b \u043b\u0438 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a \u0438\u0433\u0440\u043e\u043a\u0430 \u043f\u043e \u043e\u0441\u0438 Y.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u0438\u0433\u0440\u0430 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f (<code>gameSpeed.value = 0<\/code>), \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u00abTry again\u00bb.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0438\u0431\u0440\u0430\u0446\u0438\u044e (navigator.vibrate), \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0451 \u043d\u0430 200 \u043c\u0441.<\/p>\n<\/li>\n<\/ol>\n<p><strong>2.4. \u0417\u0430\u043f\u0443\u0441\u043a \u0438\u0433\u0440\u044b \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435<\/strong><\/p>\n<pre><code class=\"typescript\">gameLoop (); gameSpeedIncreaseInterval = setInterval(() =&gt; {         const acceleration = isMobile.value ? 0.1 : 1;         gameSpeed.value = Math.min(gameSpeed.value + acceleration, MAX_GAME_SPEED);       }, SPEED_INCREMENT_INTERVAL_MS);<\/code><\/pre>\n<ol>\n<li>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>requestAnimationFrame<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0446\u0438\u043a\u043b <code>gameLoop<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u0436\u0434\u044b\u0435 5 \u0441\u0435\u043a\u0443\u043d\u0434 <code>SPEED_INCREMENT_INTERVAL_MS<\/code> \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c game Speed, \u043d\u043e \u043d\u0435 \u0432\u044b\u0448\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0430 <code>MAX_GAME_SPEED.<\/code><\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0435\u043c \u0434\u043e\u043b\u044c\u0448\u0435 \u0438\u0434\u0435\u0442 \u0438\u0433\u0440\u0430, \u0442\u0435\u043c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<\/ol>\n<p><strong>2.5. \u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a \u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0430<\/strong><\/p>\n<pre><code class=\"typescript\"> const resumeGame = () =&gt; {       const context = canvasContext.value!;       playerCar.value!.move(           context.canvas.width \/ 2,           context.canvas.height - PLAYER_CAR_START_Y_OFFSET       );       playerCar.value!.velocityX = 0;        enemyCars.value.forEach((enemyCar) =&gt; {         enemyCar.move(             getRandom(0, context.canvas.width),             getRandom(-context.canvas.height, 0)         );       });        gameSpeed.value = INITIAL_GAME_SPEED;       crashMessage.value = '';     };<\/code><\/pre>\n<ol>\n<li>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043c\u0430\u0448\u0438\u043d\u0443 \u0438\u0433\u0440\u043e\u043a\u0430 \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443, \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0435\u0451 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438 \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u0430\u0432\u0430\u0440\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u0438 \u0442\u043e\u0436\u0435 \u00ab\u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f\u00bb \u0432\u044b\u0448\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u043f\u043e\u0437\u0438\u0446\u0438\u044f\u0445.<\/p>\n<\/li>\n<li>\n<p>gameSpeed \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e, \u0438\u0433\u0440\u0430 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ol>\n<p><strong>2.6. \u041e\u0447\u0438\u0441\u0442\u043a\u0430 \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438<\/strong><\/p>\n<pre><code class=\"javascript\"> onUnmounted(() =&gt; {       document.body.removeEventListener('keydown', handleKeydown);       document.body.removeEventListener('keyup', handleKeyup);       clearInterval(gameSpeedIncreaseInterval);     });<\/code><\/pre>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 DOM, \u0441\u043d\u0438\u043c\u0430\u0435\u043c \u0432\u0441\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0443\u0442\u0435\u0447\u043a\u0438 \u043f\u0430\u043c\u044f\u0442\u0438 \u0438 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>\u0412\u0441\u044f \u0438\u0433\u0440\u0430 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0432\u043e\u043a\u0440\u0443\u0433 Canvas: \u0444\u043e\u043d, \u043c\u0430\u0448\u0438\u043d\u044b \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u043e\u0432, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438 \u0434\u0435\u0442\u0435\u043a\u0446\u0438\u044f \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439. Vue \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0438 \u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0439 \u043a\u043b\u0430\u0432\u0438\u0448 \u0438\u043b\u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0434\u0436\u043e\u0439\u0441\u0442\u0438\u043a\u0430), \u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 Canvas \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u0439 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043b\u0435\u0433\u043a\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043f\u043e\u0434 \u0440\u0430\u0437\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p>\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u044d\u0442\u0443 \u0438\u0433\u0440\u0443 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0438 \u043a\u043e \u043c\u043d\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438\u0441\u044c \u043a\u0430\u043a Product Owner, \u0442\u0430\u043a \u0438 Team Lead \u0441 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e \u0433\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0432 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442.\u00a0<\/p>\n<p>\u0422\u0435\u043a\u0443\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0434\u0430\u043b\u0435\u043a\u0430 \u043e\u0442 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0430, \u043e\u043d\u0430 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0442\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0412 \u0438\u0433\u0440\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u043f\u043e <a href=\"https:\/\/qicconf.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0435<\/a> (\u0432\u043a\u043b\u0430\u0434\u043a\u0430 Game).<\/p>\n<p>\u041a\u043e\u0434 \u0434\u043b\u044f \u0438\u0433\u0440\u044b <a href=\"https:\/\/github.com\/venmovs\/qic_serbian_conference\/tree\/main\/src\/pages\/game\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>.<\/p>\n<h3>\u0422\u0440\u0435\u0442\u044c\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 Canvas \u2014 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 <\/h3>\n<p>\u0415\u0449\u0451 \u043e\u0434\u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c Canvas\u00a0 \u2014 \u044d\u0442\u043e \u00ab\u0445\u043e\u043b\u0441\u0442\u00bb \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f. \u041c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445:\u00a0<\/p>\n<ol>\n<li>\n<p>\u041e\u043d\u043b\u0430\u0439\u043d-\u043f\u043e\u0434\u043f\u0438\u0441\u044c: \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u044c, \u043d\u0435 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u043c\u043e-\u0430\u043a\u0446\u0438\u0438: \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0444\u043e\u0440\u043c \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043c\u0432\u043e\u043b, \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0440\u0438\u0441\u0443\u043d\u043e\u043a, \u0437\u0430 \u043b\u0443\u0447\u0448\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0430\u0451\u043c \u0441\u043a\u0438\u0434\u043a\u0438 \u0438\u043b\u0438 \u043e\u0441\u043e\u0431\u044b\u0435 \u0431\u043e\u043d\u0443\u0441\u044b.<\/p>\n<\/li>\n<\/ol>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u00ab\u0440\u0438\u0441\u043e\u0432\u0430\u043b\u043a\u0430\u00bb \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0440 \u0434\u043b\u044f \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0432\u043b\u0435\u0447\u0451\u043d\u043d\u043e\u0441\u0442\u0438 \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438.<\/p>\n<p><strong>3.1. \u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f<\/strong><\/p>\n<pre><code class=\"typescript\">const canvas = ref &lt;HTMLCanvasElement | null&gt;(null); \u0441onst isDrawing = ref &lt;boolean&gt; (false); \u0441onst context = ref &lt;CanvasRenderingContext2D | null&gt; (null); \u0441onst lastX = ref&lt;number&gt;(0); \u0441onst lastY = ref &lt;number&gt;(0);<\/code><\/pre>\n<ol>\n<li>\n<p><code>canvas<\/code>: \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0441\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;canvas&gt;<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>context<\/code>: \u0445\u0440\u0430\u043d\u0438\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 2d-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0440\u0438\u0441\u0443\u0435\u043c \u043d\u0430 <code>Canvas<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>isDrawing<\/code>: \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440, \u0432\u043a\u043b\u044e\u0447\u0451\u043d \u043b\u0438 \u0440\u0435\u0436\u0438\u043c \u00ab\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f\u00bb (\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043c\u044b\u0448\u044c\/\u043f\u0430\u043b\u0435\u0446).<\/p>\n<\/li>\n<li>\n<p><code>lastX, lastY<\/code>: \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0442\u043e\u0447\u043a\u0438, \u043e\u0442\u043a\u0443\u0434\u0430 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u043c \u043b\u0438\u043d\u0438\u044e \u0434\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0439.<\/p>\n<\/li>\n<\/ol>\n<p><strong>3.1. \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442<\/strong><\/p>\n<pre><code class=\"typescript\">const getCoordinates = (event: MouseEvent | TouchEvent): { x: number, y: number } =&gt; {   if (event instanceof MouseEvent) {     return { x: event.offsetX, y: event.offsetY };   } else if (event instanceof TouchEvent &amp;&amp; canvas.value) {     const rect = canvas.value.getBoundingClientRect();     const touch = event.touches[0];     return {       x: touch.clientX - rect.left,       y: touch.clientY - rect.top,     };   }   return { x: 0, y: 0 }; };<\/code><\/pre>\n<ol>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u044d\u0442\u043e MouseEvent, \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0431\u0435\u0440\u0435\u043c \u0438\u0437 <code>event.offsetX\/event.offsetY<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u044d\u0442\u043e TouchEvent \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435, \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0442\u0430\u0447\u0430 <code>(touches[0])<\/code> \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430 \u043a\u0430\u043d\u0432\u044b <code>(canvas.getBoundingClientRect())<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p><strong>3.2. \u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f <\/strong><code>startDrawing<\/code><\/p>\n<pre><code class=\"typescript\">const startDrawing = (event: MouseEvent | TouchEvent) =&gt; {   if (!canvas.value || !context.value) return;   isDrawing.value = true;   const { x, y } = getCoordinates(event);   [lastX.value, lastY.value] = [x, y]; };<\/code><\/pre>\n<ol>\n<li>\n<p>\u041f\u043e\u043c\u0435\u0447\u0430\u0435\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u0430\u043b \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c <code>(isDrawing.value = true)<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 <code>(lastX.value, lastY.value)<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043b\u0438\u043d\u0438\u044e \u043e\u0442\u0442\u0443\u0434\u0430 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0442\u043e\u0447\u043a\u0435.<\/p>\n<\/li>\n<\/ol>\n<p><strong>3.3. \u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438<\/strong> <code>draw<\/code><\/p>\n<pre><code class=\"typescript\">const draw = (event: MouseEvent | TouchEvent) =&gt; {   if (!isDrawing.value || !canvas.value || !context.value) return;   event.preventDefault();   const { x, y } = getCoordinates(event);   context.value.strokeStyle = 'white';   context.value.lineJoin = 'round';   context.value.lineCap = 'round';   context.value.lineWidth = 5;   context.value.beginPath();   context.value.moveTo(lastX.value, lastY.value);   context.value.lineTo(x, y);   context.value.stroke();   [lastX.value, lastY.value] = [x, y]; };<\/code><\/pre>\n<ol>\n<li>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 <code>isDrawing.value === true<\/code>, \u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0430 \u043c\u044b\u0448\u0438 \u0438\u043b\u0438 \u043f\u0430\u043b\u0435\u0446 \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u0438\u0441\u0442\u0438:<\/p>\n<\/li>\n<\/ol>\n<ul>\n<li>\n<p><code>strokeStyle = 'white' <\/code>(\u0446\u0432\u0435\u0442 \u043b\u0438\u043d\u0438\u0438),<\/p>\n<\/li>\n<li>\n<p><code>lineJoin<\/code> \u0438 <code>lineCap<\/code> \u0432 round (\u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0451\u043d\u043d\u044b\u0435 \u0443\u0433\u043b\u044b \u0438 \u043a\u043e\u043d\u0446\u044b),<\/p>\n<\/li>\n<li>\n<p><code>lineWidth = 5<\/code> (\u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u043b\u0438\u043d\u0438\u0438).<\/p>\n<\/li>\n<li>\n<p><code>beginPath()<\/code>, <code>moveTo(...),<\/code> <code>lineTo(...)<\/code> \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043b\u0438\u043d\u0438\u044e \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0442\u043e\u0447\u043a\u0438 <code>(lastX, lastY)<\/code> \u0434\u043e \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 <code>(x, y)<\/code>.<\/p>\n<\/li>\n<\/ul>\n<ol start=\"3\">\n<li>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, <code>stroke()<\/code> \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u044d\u0442\u0443 \u043b\u0438\u043d\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c <code>lastX, lastY<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043e\u0442\u0440\u0435\u0437\u043e\u043a \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u0441\u044f \u0442\u0430\u043c, \u0433\u0434\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0441\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439.<\/p>\n<\/li>\n<\/ol>\n<p><strong>3.4. \u041e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f <\/strong><code>stopDrawing<\/code><\/p>\n<pre><code class=\"typescript\">const stopDrawing = () =&gt; { isDrawing.value = false; };<\/code><\/pre>\n<p>\u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0444\u043b\u0430\u0433 <code>isDrawing<\/code>, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043f\u0443\u0441\u0442\u0438\u043b \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b\u0448\u0438\/\u043f\u0430\u043b\u0435\u0446 \u0438\u043b\u0438 \u0432\u044b\u0448\u0435\u043b \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b <code>&lt;canvas&gt;<\/code>.<\/p>\n<p>\u0421\u0430\u043c\u043c\u0430\u0440\u0438 \u043f\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>Canvas<\/code>:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438\/\u043a\u0430\u0441\u0430\u043d\u0438\u0438 <code>(startDrawing)<\/code> \u043c\u044b \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0443\u044e \u0442\u043e\u0447\u043a\u0443, \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0440\u0435\u0436\u0438\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438 \u0438\u043b\u0438 \u043f\u0430\u043b\u044c\u0446\u0430 <code>(draw) <\/code>\u0432\u0435\u0434\u0451\u043c \u043b\u0438\u043d\u0438\u044e \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043a \u043d\u043e\u0432\u043e\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f API Canvas <code>(beginPath, lineTo, stroke)<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0438 <code>(stopDrawing)<\/code> \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043d\u043e\u043f\u043a\u0430 \u00abClear Canvas\u00bb \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0445\u043e\u043b\u0441\u0442.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/github.com\/venmovs\/qic_serbian_conference\/blob\/main\/src\/pages\/drawing\/Drawing.vue\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<br \/>\u041f\u043e\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/qicconf.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a> (\u0432\u043a\u043b\u0430\u0434\u043a\u0430 Drawing).\u00a0\u00a0<\/p>\n<h3>\u0427\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 Canvas \u2014 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0437\u0432\u0443\u043a\u0430<\/h3>\n<p>\u0413\u043e\u043b\u043e\u0441\u043e\u0432\u044b\u0435 \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a\u0438 \u0441\u0442\u0430\u043b\u0438 \u043d\u0435\u043e\u0442\u044a\u0435\u043c\u043b\u0435\u043c\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u043d\u0430\u0448\u0435\u0439 \u0436\u0438\u0437\u043d\u0438, \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u043e\u0432\u0430\u0440\u0438\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u043d\u0435 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0438\u0445 \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0440\u0435\u0447\u0438 \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0430 \u0442\u0430\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u0447\u0442\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0432 \u043c\u0438\u043a\u0440\u043e\u0444\u043e\u043d, \u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0440\u0435\u0447\u044c \u0432 \u0442\u0435\u043a\u0441\u0442 \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0444\u043e\u0440\u043c\u044b.\u00a0<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0435\u0449\u0451 \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u0438 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c, \u044f \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0437\u0432\u0443\u043a\u043e\u0432\u044b\u0445 \u0432\u043e\u043b\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Canvas. \u041f\u043e\u043a\u0430 \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0432\u043e\u043b\u043d\u0430 \u00ab\u0442\u0430\u043d\u0446\u0443\u0435\u0442\u00bb \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043e\u0442\u0440\u0430\u0436\u0430\u044f \u0442\u0435\u043c\u0431\u0440 \u0438 \u0433\u0440\u043e\u043c\u043a\u043e\u0441\u0442\u044c \u0433\u043e\u043b\u043e\u0441\u0430 \u2014 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u0436\u0435 \u0442\u043e\u0447\u043d\u043e \u0432\u0430\u043c \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0441\u044f.<\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u0437\u0430\u043f\u0438\u0441\u044c \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043c\u0438\u043a\u0440\u043e\u0444\u043e\u043d\u043e\u043c, \u0432\u044b \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u0432 \u043d\u0430\u0448\u0435\u043c <a href=\"https:\/\/github.com\/venmovs\/qic_serbian_conference\/blob\/main\/src\/pages\/voice-visualizer\/VoiceVisualizer.vue\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a> . \u0410 \u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0441\u044c \u043d\u0430 \u0442\u043e\u043c, \u043a\u0430\u043a \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u044d\u0442\u0438\u0445 \u0441\u0430\u043c\u044b\u0445 \u0432\u043e\u043b\u043d.<\/p>\n<p><strong>4.1. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0441\u0441\u044b\u043b\u043a\u0438<\/strong><\/p>\n<pre><code class=\"typescript\">const canvas = ref&lt;HTMLCanvasElement | null&gt;(null); const isListening = ref&lt;boolean&gt;(false);  let audioContext: AudioContext | null = null; let analyser: AnalyserNode | null = null; let microphone: MediaStreamAudioSourceNode | null = null; let dataArray: Uint8Array; let animationFrameId: number | null = null;<\/code><\/pre>\n<ol>\n<li>\n<p><code>canvas<\/code>: \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;canvas&gt;,<\/code> \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043b\u0435\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><code>isListening<\/code>: \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0438\u0434\u0451\u0442 \u043b\u0438 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u0445\u0432\u0430\u0442 \u0437\u0432\u0443\u043a\u0430 (\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f).<\/p>\n<\/li>\n<li>\n<p><code>audioContext<\/code>: \u043e\u0431\u044a\u0435\u043a\u0442 Web Audio API, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u0441\u0435\u043c, \u0447\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441\u043e \u0437\u0432\u0443\u043a\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p><code>analyser<\/code>: \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0443\u0437\u0435\u043b (<code>AnalyserNode<\/code>), \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0432\u043e\u043b\u043d\u044b.<\/p>\n<\/li>\n<li>\n<p><code>microphone<\/code>: \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0430\u0443\u0434\u0438\u043e\u043f\u043e\u0442\u043e\u043a\u0430, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0442 \u043c\u0438\u043a\u0440\u043e\u0444\u043e\u043d\u0430.<\/p>\n<\/li>\n<li>\n<p><code>dataArray<\/code>: \u043c\u0430\u0441\u0441\u0438\u0432 \u0431\u0430\u0439\u0442\u043e\u0432, \u043a\u0443\u0434\u0430 <code>analyser <\/code>\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439 \u0432\u043e\u043b\u043d\u044b (<code>time domain<\/code>).<\/p>\n<\/li>\n<li>\n<p><code>animationFrameId<\/code>: \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443.<\/p>\n<\/li>\n<\/ol>\n<p><strong>4.2. \u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0437\u0432\u0443\u043a\u0430 <\/strong><code>drawVisualizer<\/code><\/p>\n<pre><code class=\"typescript\">const drawVisualizer = () =&gt; {   if (!canvas.value || !analyser) return;    const canvasCtx = canvas.value!.getContext('2d');   if (!canvasCtx) return;    const width = canvas.value.width;   const height = canvas.value.height;  \/\/\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c AnalyserNode    analyser.fftSize = 2048;   const bufferLength = analyser.frequencyBinCount;   dataArray = new Uint8Array(bufferLength);  \/\/\u0424\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440   const draw = () =&gt; {     if (!canvas.value || !analyser) return;     analyser.getByteTimeDomainData(dataArray);  \/\/\u041e\u0447\u0438\u0449\u0430\u0435\u043c \u0445\u043e\u043b\u0441\u0442 \u0438 \u0437\u0430\u043b\u0438\u0432\u0430\u0435\u043c \u0444\u043e\u043d\u043e\u043c     canvasCtx.clearRect(0, 0, width, height);     canvasCtx.fillStyle = 'rgb(200, 200, 200)';     canvasCtx.fillRect(0, 0, width, height);  \/\/\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0438     canvasCtx.lineWidth = 2;     canvasCtx.strokeStyle = 'rgb(0, 0, 0)';      canvasCtx.beginPath();  \/\/sliceWidth - \u0448\u0438\u0440\u0438\u043d\u0430 \u0448\u0430\u0433\u0430 \u043c\u0435\u0436\u0434\u0443 \u0442\u043e\u0447\u043a\u0430\u043c\u0438     const sliceWidth = (width * 1.0) \/ bufferLength;     let x = 0;  \/\/ \u041f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043f\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0443 \u0438 \u0440\u0438\u0441\u0443\u0435\u043c \u043a\u043e\u043b\u0435\u0431\u0430\u043d\u0438\u044f     for (let i = 0; i &lt; bufferLength; i++) {       const v = dataArray[i] \/ 128.0;       const y = (v * height) \/ 2;        if (i === 0) {         canvasCtx.moveTo(x, y);       } else {         canvasCtx.lineTo(x, y);       }        x += sliceWidth;     } \/\/ \u0417\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u043c \u043b\u0438\u043d\u0438\u044e \u043d\u0430 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435     canvasCtx.lineTo(canvas.value.width, canvas.value.height \/ 2);     canvasCtx.stroke();  \/\/\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u043b\u0443\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u0430\u0434\u0440     animationFrameId = requestAnimationFrame(draw);   };    draw(); };<\/code><\/pre>\n<ol>\n<li>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c <code>canvasCtx <\/code>\u2014 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 2D-\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c <code>fftSize <\/code>\u2014 \u0434\u043b\u0438\u043d\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 (\u0443 \u043d\u0430\u0441 2048).<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043c\u0430\u0441\u0441\u0438\u0432 <code>dataArray<\/code> \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438 \u043f\u0440\u043e\u0441\u0438\u043c <code>AnalyserNode<\/code> \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u0430\u043c\u043f\u043b\u0438\u0442\u0443\u0434 (<code>getByteTimeDomainData)<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u0446\u0438\u043a\u043b\u0435 <code>draw()<\/code>:<\/p>\n<ol>\n<li>\n<p>\u041e\u0447\u0438\u0449\u0430\u0435\u043c \u0445\u043e\u043b\u0441\u0442 \u0438 \u0437\u0430\u043b\u0438\u0432\u0430\u0435\u043c \u0444\u043e\u043d\u043e\u0432\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>dataArray<\/code>, \u0441\u0442\u0440\u043e\u0438\u043c \u043b\u0438\u043d\u0438\u044e, \u0433\u0434\u0435 \u043e\u0441\u044c X \u2014 \u044d\u0442\u043e \u0438\u043d\u0434\u0435\u043a\u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0430 \u043e\u0441\u044c Y \u2014 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0430\u043c\u043f\u043b\u0438\u0442\u0443\u0434\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <code>requestAnimationFrame(draw)<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0432\u0443\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Canvas \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0432\u0435\u0441\u0442\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u0442\u043e\u0433\u0438:<\/p>\n<ul>\n<li>\n<p>\u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 dataArray, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u043d\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 (<code>AnalyserNode<\/code>) \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u0430. \u0414\u043b\u044f \u0442\u0438\u0445\u0438\u0445 \u0443\u0447\u0430\u0441\u0442\u043a\u043e\u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u043b\u0438\u0437\u043a\u0438 \u043a \u00ab\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435\u00bb (\u043e\u043a\u043e\u043b\u043e 128), \u0430 \u043b\u044e\u0431\u044b\u0435 \u043e\u0442\u043a\u043b\u043e\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0448\u0435 \u0438\u043b\u0438 \u043d\u0438\u0436\u0435 \u044d\u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430 \u0437\u0432\u0443\u043a.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 Canvas \u0440\u0438\u0441\u0443\u0435\u043c \u043a\u0430\u0436\u0434\u0443\u044e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0442\u043e\u0447\u0435\u043a \u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0438\u0445 \u043b\u0438\u043d\u0438\u044f\u043c\u0438, \u043f\u043e\u043b\u0443\u0447\u0430\u044f \u0432\u043e\u043b\u043d\u043e\u0432\u0443\u044e \u0444\u043e\u0440\u043c\u0443.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0436\u0430\u0442\u044c \u00abStart\u00bb, \u0437\u0430\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0432 \u043c\u0438\u043a\u0440\u043e\u0444\u043e\u043d \u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441\u0432\u043e\u0435\u0433\u043e \u0433\u043e\u043b\u043e\u0441\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0444\u0438\u0447\u0443 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/qicconf.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a> (\u0432\u043a\u043b\u0430\u0434\u043a\u0430 <a href=\"https:\/\/qicconf.netlify.app\/voice-visualizer\" rel=\"noopener noreferrer nofollow\">Voice Visualizer<\/a>).<br \/>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432 \u043a\u043e\u0434\u0435 <a href=\"https:\/\/github.com\/venmovs\/qic_serbian_conference\/blob\/main\/src\/pages\/voice-visualizer\/VoiceVisualizer.vue\" rel=\"noopener noreferrer nofollow\">\u0442\u0443\u0442<\/a>.\u00a0<\/p>\n<h3>Canvas \u0443\u043c\u0435\u0435\u0442 \u0438 \u0432 3D<\/h3>\n<p>Canvas \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u0440\u0451\u0445\u043c\u0435\u0440\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 <a href=\"https:\/\/qd.app\/en\" rel=\"noopener noreferrer nofollow\">QIC App <\/a>\u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u043c\u0430\u0448\u0438\u043d. \u042f \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u0432 \u044d\u0442\u043e \u043d\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0430\u043b\u0441\u044f, \u043d\u043e \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e Canvas (\u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0447\u0435\u0440\u0435\u0437 WebGL) \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0434\u043b\u044f \u0432\u0430\u0441 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u0430 \u0431\u044b\u0441\u0442\u0440\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430, \u0438\u043d\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u0443\u043c\u043d\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e. \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 3D-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u043e\u0438\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/threejs.org\/\" rel=\"noopener noreferrer nofollow\">Three.js<\/a>.<\/p>\n<p>\u0423 \u043c\u0435\u043d\u044f \u0431\u044b\u043b\u0430 \u0438\u0434\u0435\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0443\u044e GIF-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043d\u043e \u0435\u0451 \u043e\u0431\u044a\u0451\u043c \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u043b 800 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u044f \u043f\u043e\u0448\u0451\u043b \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0443\u0442\u0451\u043c \u0438 \u0432\u0441\u0442\u0440\u043e\u0438\u043b \u0447\u0435\u0440\u0435\u0437 iframe \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 3D-\u043c\u043e\u0434\u0435\u043b\u044c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u043d\u0430\u043b\u043e\u0433 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044f <a href=\"https:\/\/qicconf.netlify.app\/3d\" rel=\"noopener noreferrer nofollow\">Volkswagen<\/a>). \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043f\u043e \u043d\u0435\u0439, \u043c\u043e\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0449\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b 3D-\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0434\u043e\u0441\u0442\u0438\u0436\u0438\u043c\u044b \u0432 \u0432\u0435\u0431\u0435.<\/p>\n<p>\u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u044b \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e \u0441\u0430\u0439\u0442\u0435 <a href=\"https:\/\/www.awwwards.com\/\" rel=\"noopener noreferrer nofollow\">Awwwards<\/a>. \u0422\u0430\u043c \u043d\u043e\u043c\u0438\u043d\u0438\u0440\u0443\u044e\u0442 \u043a\u0440\u0443\u0442\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 \u043f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441, 3D \u0438 \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b. \u041e\u0447\u0435\u043d\u044c \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u0442\u0443\u0434\u0430 \u2014 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b.<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u041c\u044b \u0432 QIC \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Canvas \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u0437\u0430\u0434\u0430\u0447: \u0434\u043b\u044f \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u043c\u0435\u0445\u0430\u043d\u0438\u043a, \u0438 \u044d\u0442\u043e \u043b\u0438\u0448\u044c \u043d\u0430\u0447\u0430\u043b\u043e. Canvas \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u2014 \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0434\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f 3D-\u043c\u043e\u0434\u0435\u043b\u0435\u0439. \u0418 \u044f \u0441 \u043d\u0435\u0442\u0435\u0440\u043f\u0435\u043d\u0438\u0435\u043c \u0436\u0434\u0443 \u043d\u043e\u0432\u044b\u0445 \u0438\u0434\u0435\u0439 \u0438 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0432\u043e\u043f\u043b\u043e\u0442\u0438\u0442\u044c \u0432 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<p>\u0410 \u043a\u0430\u043a \u0431\u044b \u0432\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438 Canvas? \u0414\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0438\u0434\u0435\u044f\u043c\u0438 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u2014 \u0432\u043c\u0435\u0441\u0442\u0435 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b \u0435\u0449\u0451 \u0431\u043e\u043b\u044c\u0448\u0435!<\/p>\n<p><a href=\"https:\/\/github.com\/venmovs\/qic_serbian_conference\" rel=\"noopener noreferrer nofollow\">Github<\/a> I <a href=\"https:\/\/qicconf.netlify.app\/\" rel=\"noopener noreferrer nofollow\">Demo\u00a0<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/904268\/\"> https:\/\/habr.com\/ru\/articles\/904268\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0412\u0438\u0433\u0435\u043d \u041c\u043e\u0432\u0441\u0438\u0441\u044f\u043d, \u044f Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 QIC digital hub. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u044b \u0432\u043d\u0435\u0434\u0440\u0438\u043b\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e Canvas, \u043a\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043e\u043d \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0440\u0435\u0448\u0430\u0442\u044c, \u0447\u0442\u043e \u0443\u0436\u0435 \u0443\u0441\u043f\u0435\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u043a\u0430\u043a\u0438\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043b\u0430\u043d\u044b \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435.<\/p>\n<p>\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u043c\u043e\u0451\u043c \u0434\u043e\u043a\u043b\u0430\u0434\u0435 \u0441 QIC Tech Meetup, \u043f\u043e\u043b\u043d\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043d\u0430 <a href=\"https:\/\/www.youtube.com\/watch?v=xscjFa8UjAs\" rel=\"noopener noreferrer nofollow\">YouTube<\/a>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u043e, Canvas \u2014\u00a0 \u044d\u0442\u043e \u00ab\u0445\u043e\u043b\u0441\u0442\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u0434\u0430\u0432\u0430\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0431\u0443\u0434\u0443 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 <a href=\"https:\/\/qicconf.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442<\/a>, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043d\u0438\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Canvas. <\/p>\n<p>*\u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u041d\u0430\u0437\u0430\u0434\u00bb \u2014 \u0434\u043b\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u0441\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.\u00a0<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0430\u0447\u043d\u0451\u043c \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0432 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0438\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Canvas.<\/p>\n<h3>\u041f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 Canvas: \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h3>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Canvas, \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u0431\u0438\u0437\u043d\u0435\u0441\u0430: \u00ab\u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043e\u043b\u0433\u043e, \u044d\u0442\u043e \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439\u00bb.<\/p>\n<p>\u0412 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0438\u0434\u0435\u044f: \u00ab\u0427\u0442\u043e, \u0435\u0441\u043b\u0438 \u0441\u0436\u0438\u043c\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435?\u00bb. \u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u043e\u0433 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0438\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u043b\u0441\u044f Canvas.<\/p>\n<pre><code class=\"javascript\">export const compressImageFile = (   imageFile,   imageQuality = 0.7,   maxWidth = 800,   maxHeight = 600 ) =&gt; {   return new Promise((resolve, reject) =&gt; {     const img = new Image()     const objectURL = URL.createObjectURL(imageFile)     img.src = objectURL     img.onload = () =&gt; {       const canvas = document.createElement('canvas')       let width = img.width       let height = img.height       if (width &gt; height) {         if (width &gt; maxWidth) {           height *= (maxWidth \/ width)           width = maxWidth         }       } else {         if (height &gt; maxHeight) {           width *= (maxHeight \/ height)           height = maxHeight         }       }       canvas.width = width       canvas.height = height       const ctx = canvas.getContext('2d')       ctx.drawImage(img, 0, 0, width, height)       const type = imageFile.type       canvas.toBlob((blob) =&gt; {         const fileName = imageFile.name         const compressedFile = new File([blob], fileName, {           lastModified: Date.now(),           type         })         URL.revokeObjectURL(objectURL)         resolve(compressedFile)       }, type, imageQuality)     }     img.onerror = error =&gt; {       URL.revokeObjectURL(objectURL)       reject(error)     }   }) }<\/code><\/pre>\n<ol>\n<li>\n<p>\u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0431\u0435\u0440\u0451\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0438\u0437 \u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 objectURL \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 Image.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 (maxWidth, maxHeight), \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043d\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0421anvas.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e canvas.toBlob \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f Blob \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c (imageQuality), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 File.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0436\u0430\u0442\u044b\u0439 (\u0438 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u043d\u044b\u0439) \u0444\u0430\u0439\u043b, \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0438\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044e.<\/p>\n<\/li>\n<\/ol>\n<p>\u041a\u0430\u043a\u0438\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b? \u0412 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0435\u0441\u0438\u043b\u043e \u043f\u043e\u0447\u0442\u0438 3 \u041c\u0411, \u0430 \u043f\u043e\u0441\u043b\u0435 \u0441\u0436\u0430\u0442\u0438\u044f \u0441\u0442\u0430\u043b\u043e \u0432\u0441\u0435\u0433\u043e 49 \u041a\u0411. \u0422\u043e \u0435\u0441\u0442\u044c \u0444\u0430\u0439\u043b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 57 \u0440\u0430\u0437! \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0441\u043b\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 40 \u041a\u0411, \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u0443\u0436\u0435 \u043d\u0435 \u0432\u044b\u0439\u0434\u0435\u0442, \u043d\u043e \u0434\u0430\u0436\u0435 \u0442\u0430\u043c \u0437\u0430\u043c\u0435\u0442\u043d\u0430 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u044f. \u0412\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u0430\u043a\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0441 16-18 \u0441\u0435\u043a\u0443\u043d\u0434 \u0434\u043e 2.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 vue\u00a0 \u2014 <a href=\"https:\/\/github.com\/venmovs\/qic_serbian_conference\/blob\/main\/src\/pages\/compress-image\/CompressImage.vue\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0436\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435:<\/p>\n<ol>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435: <a href=\"https:\/\/qicconf.netlify.app\/\" rel=\"noopener noreferrer nofollow\">https:\/\/qicconf.netlify.app\/<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0436\u0438\u043c\u0430\u0435\u0442\u0435 \u201c<a href=\"https:\/\/qicconf.netlify.app\/compress-image\" rel=\"noopener noreferrer nofollow\">Compress Image<\/a>\u201d<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><\/figure>\n<h3>\u0412\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 Canvas: \u0433\u0435\u0439\u043c\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u00a0<\/h3>\n<p>\u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u0430 \u0438\u0434\u0435\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Canvas \u0434\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u043b\u0438 \u0441\u043a\u043e\u0440\u043e\u0442\u0430\u0442\u044c \u0432\u0440\u0435\u043c\u044f, \u0435\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u043f\u0440\u043e\u043f\u0430\u0434\u0451\u0442 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442. \u0412\u0435\u0434\u044c \u0447\u0430\u0441\u0442\u043e, \u043a\u043e\u0433\u0434\u0430 \u0441\u0432\u044f\u0437\u044c \u043e\u0431\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0432\u0438\u043d\u0438\u0442 \u0432 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438\u043b\u0438 \u0441\u0430\u043c \u0441\u0435\u0440\u0432\u0438\u0441. \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043c\u0438\u043d\u0438-\u0438\u0433\u0440\u0430 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u00ab\u0441\u043c\u044f\u0433\u0447\u0438\u0442\u044c\u00bb \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435 \u0438 \u0443\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>\u0412 \u043c\u043e\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u2014 \u044d\u0442\u043e \u0438\u0433\u0440\u0430, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043c\u0430\u0448\u0438\u043d\u043e\u0439 \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0435\u0451 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438.\u00a0 \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e <a href=\"https:\/\/qicconf.netlify.app\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0435<\/a> (\u0432\u043a\u043b\u0430\u0434\u043a\u0430 Game).<\/p>\n<pre><code class=\"xml\"> &lt;canvas         ref=\"canvasRef\"         class=\"game-canvas\"         :width=\"canvasSize.width\"         :height=\"canvasSize.height\"     \/&gt;<\/code><\/pre>\n<ol>\n<li>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;canvas&gt; \u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0441 canvasRef, \u0447\u0442\u043e\u0431\u044b \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443 2D-\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 (canvasContext).<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c canvasSize, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043a\u0440\u0430\u043d\u0430 (\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445 \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432).<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442:<\/p>\n<pre><code class=\"typescript\">  const context = (canvasContext.value =   canvasRef.value!.getContext('2d')!);<\/code><\/pre>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c 2d-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 (canvasContext.value), \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u043e\u0439.<\/p>\n<p>\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0438\u0433\u0440\u044b (gameLoop) \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0447\u0438\u0449\u0430\u0435\u043c Canvas, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043d\u0430\u0441\u043b\u0430\u0438\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<pre><code class=\"typescript\"> const clearCanvas = () =&gt; {       canvasContext.value!.clearRect(           0,           0,           canvasContext.value!.canvas.width,           canvasContext.value!.canvas.height       );     };<\/code><\/pre>\n<p><strong>2.1. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u0433\u0440\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b<\/strong><\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0438 \u0438 \u0434\u043e\u0440\u043e\u0433\u0430. \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043c\u0430\u0448\u0438\u043d.<\/p>\n<figure class=\"full-width\"><\/figure>\n<ol>\n<li>\n<p>\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430: \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f CanvasRenderingContext2D, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u00ab\u0437\u043d\u0430\u043b\u00bb, \u0433\u0434\u0435 \u0441\u0435\u0431\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f Image, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a (imageSrc). \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u044b \u0437\u0430\u0434\u0430\u0451\u043c width \u0438 height \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430, \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0439 (CAR_SCALE_MOB \u0438 CAR_SCALE).<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 move(x, y): \u043c\u0435\u043d\u044f\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043c\u0430\u0448\u0438\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0434\u0432\u0438\u0433\u0430\u043b\u0430\u0441\u044c \u0438\u043b\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0432 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 draw(): \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 context.drawImage(&#8230;) \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043d\u0430 Canvas.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"typescript\">class Car {   context: CanvasRenderingContext2D;   x: number;   y: number;   width = 0;   height = 0;   velocityX = 0;   speed = PLAYER_CAR_SPEED;   friction = PLAYER_CAR_FRICTION;   image: HTMLImageElement;    constructor (context: CanvasRenderingContext2D, imageSrc: string, isMobile: boolean) {     this.context = context;     this.x = 0;     this.y = 0;     this.image = new Image();     this.image.src = imageSrc;      this.image.onload = () =&gt; {       const scale = isMobile ? CAR_SCALE_MOB : CAR_SCALE;       this.width = this.image.width * scale;       this.height = this.image.height * scale;     };   } move (x: number, y: number): void {     this.x = x;     this.y = y;   }    draw (): void {     if (this.width &amp;&amp; this.height) {       this.context.drawImage(this.image, this.x, this.y, this.width, this.height);     }   } }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0434\u043e\u0440\u043e\u0433\u0438 <code>drawRoad<\/code><\/p>\n<figure class=\"full-width\"><\/figure>\n<ol>\n<li>\n<p>\u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0444\u043e\u043d \u0441\u0432\u0435\u0442\u043b\u043e-\u0441\u0435\u0440\u044b\u043c (#f1f4f6), \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u00ab\u0434\u043e\u0440\u043e\u0436\u043d\u043e\u0435\u00bb \u043f\u043e\u043b\u043e\u0442\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0438\u0441\u0443\u0435\u043c \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e setLineDash.<\/p>\n<\/li>\n<li>\n<p>roadOffset \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043b\u0438\u043d\u0438\u044f \u00ab\u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u043b\u0430\u0441\u044c\u00bb \u0432\u043d\u0438\u0437, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u044d\u0444\u0444\u0435\u043a\u0442 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\"> const drawRoad = () =&gt; {       const context = canvasContext.value!;       const roadWidth = context.canvas.width;        context.fillStyle = '#f1f4f6';       context.fillRect(0, 0, roadWidth, context.canvas.height);        roadOffset.value =           (roadOffset.value + gameSpeed.value + 1) % (ROAD_LINE_HEIGHT + ROAD_GAP_HEIGHT);        context.strokeStyle = '#5927ff';       context.lineWidth = ROAD_LINE_WIDTH;       context.setLineDash([ROAD_LINE_HEIGHT, ROAD_GAP_HEIGHT]);       context.beginPath();       context.moveTo(roadWidth \/ 2, roadOffset.value - (ROAD_LINE_HEIGHT + ROAD_GAP_HEIGHT));       context.lineTo(roadWidth \/ 2, context.canvas.height);       context.stroke();     };<\/code><\/pre>\n<p><strong>2.2. \u041f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u0430\u0434\u0440\u0435 <\/strong><code><strong>gameLoop<\/strong><\/code><\/p>\n<pre><code class=\"typescript\"> const gameLoop = () =&gt; {       clearCanvas();       drawRoad();       updateEnemyCars();       isMobile.value ? updatePlayerCarInMobile() : updatePlayerCar();       handleCollisions();       requestAnimationFrame(gameLoop);     };<\/code><\/pre>\n<ol>\n<li>\n<p><code>clearCanvas()<\/code>: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0447\u0438\u0441\u0442\u0438\u043c \u0445\u043e\u043b\u0441\u0442.<\/p>\n<\/li>\n<li>\n<p><code>drawRoad()<\/code>: \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0444\u043e\u043d\u043e\u0432\u0443\u044e \u0434\u043e\u0440\u043e\u0433\u0443.<\/p>\n<\/li>\n<li>\n<p><code>updateEnemyCars()<\/code>: \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u043c\u0430\u0448\u0438\u043d\u044b-\u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u043e\u0432 \u0432\u043d\u0438\u0437 \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c gameSpeed \u0438 \u0441\u043d\u043e\u0432\u0430 \u0438\u0445 \u0440\u0438\u0441\u0443\u0435\u043c.<\/p>\n<\/li>\n<li>\n<p><code>updatePlayerCar()<\/code> \u0438\u043b\u0438 <code>updatePlayerCarInMobile()<\/code>: \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u0430\u0448\u0438\u043d\u043e\u0439 \u0438\u0433\u0440\u043e\u043a\u0430 (\u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u0432\u043e\u0434\u0430 \u2014 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u0438\u043b\u0438 \u0434\u0436\u043e\u0439\u0441\u0442\u0438\u043a).<\/p>\n<\/li>\n<li>\n<p><code>handleCollisions()<\/code>: \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0438\u0433\u0440\u043e\u043a\u0430 \u0441 \u0432\u0440\u0430\u0436\u0435\u0441\u043a\u0438\u043c\u0438 \u043c\u0430\u0448\u0438\u043d\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p><code>requestAnimationFrame(gameLoop)<\/code>: \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c gameLoop \u0434\u043b\u044f \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 ~60 \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443.<\/p>\n<\/li>\n<\/ol>\n<p><strong>2.3. \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439 <\/strong><code>handleCollisions<\/code><\/p>\n<pre><code class=\"typescript\">const handleCollisions = () =&gt; {   enemyCars.value.forEach((enemyCar) =&gt; {     const player = playerCar.value!;     const hasCollisionX =         (enemyCar.x &gt; player.x &amp;&amp; enemyCar.x &lt; player.x + player.width) ||         (enemyCar.x + enemyCar.width &gt; player.x &amp;&amp;             enemyCar.x + enemyCar.width &lt; player.x + player.width);     const hasCollisionY = enemyCar.y + enemyCar.height &gt; player.y;     if (hasCollisionX &amp;&amp; hasCollisionY) {       if (window.navigator &amp;&amp; window.navigator.vibrate) {         window.navigator.vibrate(200);       }       gameSpeed.value = 0;       crashMessage.value =           'Don\\'t worry, we cover such cases with insurance.';     }   }); };<\/code><\/pre>\n<ol>\n<li>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u044e\u0442\u0441\u044f \u043b\u0438 \u043c\u0430\u0448\u0438\u043d\u044b \u043f\u043e \u043e\u0441\u0438 X (\u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432).<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043d\u0435 \u043d\u0430\u043a\u0440\u044b\u043b \u043b\u0438 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a \u0438\u0433\u0440\u043e\u043a\u0430 \u043f\u043e \u043e\u0441\u0438 Y.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u0438\u0433\u0440\u0430 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f (<code>gameSpeed.value = 0<\/code>), \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u00abTry again\u00bb.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0438\u0431\u0440\u0430\u0446\u0438\u044e (navigator.vibrate), \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0451 \u043d\u0430 200 \u043c\u0441.<\/p>\n<\/li>\n<\/ol>\n<p><strong>2.4. \u0417\u0430\u043f\u0443\u0441\u043a \u0438\u0433\u0440\u044b \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435<\/strong><\/p>\n<pre><code class=\"typescript\">gameLoop (); gameSpeedIncreaseInterval = setInterval(() =&gt; {         const acceleration = isMobile.value ? 0.1 : 1;         gameSpeed.value = Math.min(gameSpeed.value + acceleration, MAX_GAME_SPEED);       }, SPEED_INCREMENT_INTERVAL_MS);<\/code><\/pre>\n<ol>\n<li>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>requestAnimationFrame<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0446\u0438\u043a\u043b <code>gameLoop<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u0436\u0434\u044b\u0435 5 \u0441\u0435\u043a\u0443\u043d\u0434 <code>SPEED_INCREMENT_INTERVAL_MS<\/code> \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c game Speed, \u043d\u043e \u043d\u0435 \u0432\u044b\u0448\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0430 <code>MAX_GAME_SPEED.<\/code><\/p>\n<\/li>\n<li>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0435\u043c \u0434\u043e\u043b\u044c\u0448\u0435 \u0438\u0434\u0435\u0442 \u0438\u0433\u0440\u0430, \u0442\u0435\u043c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<\/ol>\n<p><strong>2.5. \u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a \u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0430<\/strong><\/p>\n<pre><code class=\"typescript\"> const resumeGame = () =&gt; {       const context = canvasContext.value!;       playerCar.value!.move(           context.canvas.width \/ 2,           context.canvas.height - PLAYER_CAR_START_Y_OFFSET       );       playerCar.value!.velocityX = 0;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-457318","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/457318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=457318"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/457318\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=457318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=457318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=457318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}