{"id":2836,"date":"2024-11-10T13:33:45","date_gmt":"2024-11-10T06:33:45","guid":{"rendered":"https:\/\/fstack.io.vn\/?p=2836"},"modified":"2024-11-10T13:41:10","modified_gmt":"2024-11-10T06:41:10","slug":"2-canvas-va-cach-su-dung-trong-javascript-thiet-ke-do-hoa-cho-trang-web-cho-nguoi-moi-bat-dau","status":"publish","type":"post","link":"https:\/\/fstack.io.vn\/blog\/2-canvas-va-cach-su-dung-trong-javascript-thiet-ke-do-hoa-cho-trang-web-cho-nguoi-moi-bat-dau\/","title":{"rendered":"#2 Canvas v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng trong JavaScript. Thi\u1ebft k\u1ebf \u0111\u1ed3 h\u1ecda cho trang web cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u."},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2836\" class=\"elementor elementor-2836\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cec188a e-flex e-con-boxed e-con e-parent\" data-id=\"cec188a\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eeecb2e elementor-widget elementor-widget-text-editor\" data-id=\"eeecb2e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Canvas<\/strong> l\u00e0 m\u1ed9t <a href=\"https:\/\/fstack.io.vn\/blog\/top-10-cong-cu-digital-marketing-co-ban-cho-nguoi-moi-bat-dau\/\">c\u00f4ng c\u1ee5<\/a> m\u1ea1nh m\u1ebd c\u1ee7a HTML5, gi\u00fap b\u1ea1n t\u1ea1o ra \u0111\u1ed3 h\u1ecda tr\u1ef1c ti\u1ebfp tr\u00ean trang web b\u1eb1ng <a href=\"https:\/\/fstack.io.vn\/blog\/mot-so-cau-hoi-phong-van-javascript-tu-co-ban-den-nang-cao\/\">JavaScript<\/a>. \u0110\u00e2y l\u00e0 l\u1ef1a ch\u1ecdn ph\u1ed5 bi\u1ebfn \u0111\u1ec3 v\u1ebd h\u00ecnh \u1ea3nh, \u0111\u1ed3 th\u1ecb, v\u00e0 th\u1eadm ch\u00ed l\u00e0 tr\u00f2 ch\u01a1i \u0111\u01a1n gi\u1ea3n. B\u00e0i vi\u1ebft n\u00e0y s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1ch s\u1eed d\u1ee5ng Canvas cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7846277 elementor-widget elementor-widget-heading\" data-id=\"7846277\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Danh m\u1ee5c b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/fstack.io.vn\/blog\/2-canvas-va-cach-su-dung-trong-javascript-thiet-ke-do-hoa-cho-trang-web-cho-nguoi-moi-bat-dau\/#Canvas_la_gi\" >Canvas l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fstack.io.vn\/blog\/2-canvas-va-cach-su-dung-trong-javascript-thiet-ke-do-hoa-cho-trang-web-cho-nguoi-moi-bat-dau\/#Thiet_Lap_Canvas_trong_JavaScript\" >Thi\u1ebft L\u1eadp Canvas trong JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fstack.io.vn\/blog\/2-canvas-va-cach-su-dung-trong-javascript-thiet-ke-do-hoa-cho-trang-web-cho-nguoi-moi-bat-dau\/#Cac_Phuong_Thuc_Ve_Hinh_Co_Ban\" >C\u00e1c Ph\u01b0\u01a1ng Th\u1ee9c V\u1ebd H\u00ecnh C\u01a1 B\u1ea3n<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fstack.io.vn\/blog\/2-canvas-va-cach-su-dung-trong-javascript-thiet-ke-do-hoa-cho-trang-web-cho-nguoi-moi-bat-dau\/#Ve_Hinh_Chu_Nhat\" >V\u1ebd H\u00ecnh Ch\u1eef Nh\u1eadt<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/fstack.io.vn\/blog\/2-canvas-va-cach-su-dung-trong-javascript-thiet-ke-do-hoa-cho-trang-web-cho-nguoi-moi-bat-dau\/#Ve_Duong_Thang\" >V\u1ebd \u0110\u01b0\u1eddng Th\u1eb3ng<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/fstack.io.vn\/blog\/2-canvas-va-cach-su-dung-trong-javascript-thiet-ke-do-hoa-cho-trang-web-cho-nguoi-moi-bat-dau\/#Ve_Hinh_Tron\" >V\u1ebd H\u00ecnh Tr\u00f2n<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/fstack.io.vn\/blog\/2-canvas-va-cach-su-dung-trong-javascript-thiet-ke-do-hoa-cho-trang-web-cho-nguoi-moi-bat-dau\/#Thiet_Lap_Mau_Sac_va_Do_Trong_Suot\" >Thi\u1ebft L\u1eadp M\u00e0u S\u1eafc v\u00e0 \u0110\u1ed9 Trong Su\u1ed1t<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/fstack.io.vn\/blog\/2-canvas-va-cach-su-dung-trong-javascript-thiet-ke-do-hoa-cho-trang-web-cho-nguoi-moi-bat-dau\/#Ung_Dung_Thuc_Te_cua_Canvas\" >\u1ee8ng D\u1ee5ng Th\u1ef1c T\u1ebf c\u1ee7a Canvas<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Canvas_la_gi\"><\/span> Canvas l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a902782 elementor-widget elementor-widget-text-editor\" data-id=\"a902782\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>h\u1ebb <code>&lt;canvas&gt;<\/code> t\u1ea1o ra m\u1ed9t kh\u00f4ng gian tr\u1ed1ng, cho ph\u00e9p b\u1ea1n s\u1eed d\u1ee5ng JavaScript \u0111\u1ec3 v\u1ebd c\u00e1c y\u1ebfu t\u1ed1 \u0111\u1ed3 h\u1ecda nh\u01b0 h\u00ecnh h\u1ecdc, bi\u1ec3u \u0111\u1ed3, ho\u1eb7c \u1ea3nh \u0111\u1ed9ng.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db2806f elementor-widget elementor-widget-code-highlight\" data-id=\"db2806f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><canvas id=\"myCanvas\" width=\"500\" height=\"500\"><\/canvas>\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3cb0883 elementor-widget elementor-widget-text-editor\" data-id=\"3cb0883\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong><code>id<\/code><\/strong>: \u0110\u1ecbnh danh cho th\u1ebb Canvas.<\/li><li><strong><code>width<\/code> v\u00e0 <code>height<\/code><\/strong>: K\u00edch th\u01b0\u1edbc kh\u00f4ng gian, t\u00ednh b\u1eb1ng pixel.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28d5f23 elementor-widget elementor-widget-heading\" data-id=\"28d5f23\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Thiet_Lap_Canvas_trong_JavaScript\"><\/span>Thi\u1ebft L\u1eadp Canvas trong JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6dff35b elementor-widget elementor-widget-text-editor\" data-id=\"6dff35b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>S\u1eed d\u1ee5ng JavaScript \u0111\u1ec3 l\u1ea5y <a href=\"https:\/\/fstack.io.vn\/blog\/lap-trinh-huong-doi-tuong-la-gi-mot-so-dac-trung-cua-oop\/\">\u0111\u1ed1i t\u01b0\u1ee3ng<\/a> canvas v\u00e0 ng\u1eef c\u1ea3nh v\u1ebd:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3477456 elementor-widget elementor-widget-code-highlight\" data-id=\"3477456\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const canvas = document.getElementById(\"myCanvas\");\nconst ctx = canvas.getContext(\"2d\");\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e673c1 elementor-widget elementor-widget-text-editor\" data-id=\"2e673c1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ph\u01b0\u01a1ng th\u1ee9c <code>getContext(\"2d\")<\/code> cho ph\u00e9p b\u1ea1n s\u1eed d\u1ee5ng c\u00e1c l\u1ec7nh v\u1ebd 2D.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-976cce5 elementor-widget elementor-widget-heading\" data-id=\"976cce5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Cac_Phuong_Thuc_Ve_Hinh_Co_Ban\"><\/span>C\u00e1c Ph\u01b0\u01a1ng Th\u1ee9c V\u1ebd H\u00ecnh C\u01a1 B\u1ea3n<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-036474d elementor-widget elementor-widget-heading\" data-id=\"036474d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Ve_Hinh_Chu_Nhat\"><\/span>V\u1ebd H\u00ecnh Ch\u1eef Nh\u1eadt<span class=\"ez-toc-section-end\"><\/span><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e24bdf elementor-widget elementor-widget-text-editor\" data-id=\"3e24bdf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong> <code>fillRect(x, y, width, height)<\/code><\/strong>: V\u1ebd h\u00ecnh ch\u1eef nh\u1eadt \u0111\u1eb7c.<\/li><li><strong><code>strokeRect(x, y, width, height)<\/code><\/strong>: V\u1ebd h\u00ecnh ch\u1eef nh\u1eadt kh\u00f4ng t\u00f4 m\u00e0u.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-471f0b2 elementor-widget elementor-widget-code-highlight\" data-id=\"471f0b2\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>ctx.fillStyle = \"blue\";\nctx.fillRect(10, 10, 100, 50);  \/\/ H\u00ecnh ch\u1eef nh\u1eadt m\u00e0u xanh d\u01b0\u01a1ng\nctx.strokeStyle = \"red\";\nctx.strokeRect(130, 10, 100, 50);  \/\/ H\u00ecnh ch\u1eef nh\u1eadt \u0111\u01b0\u1eddng vi\u1ec1n \u0111\u1ecf\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-75267a6 elementor-widget elementor-widget-heading\" data-id=\"75267a6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Ve_Duong_Thang\"><\/span>V\u1ebd \u0110\u01b0\u1eddng Th\u1eb3ng<span class=\"ez-toc-section-end\"><\/span><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2e351d elementor-widget elementor-widget-code-highlight\" data-id=\"a2e351d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>ctx.beginPath();\nctx.moveTo(0, 0);\nctx.lineTo(200, 100);\nctx.stroke();\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b5729c elementor-widget elementor-widget-heading\" data-id=\"8b5729c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Ve_Hinh_Tron\"><\/span>V\u1ebd H\u00ecnh Tr\u00f2n<span class=\"ez-toc-section-end\"><\/span><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-489db4a elementor-widget elementor-widget-text-editor\" data-id=\"489db4a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong><code>arc(x, y, radius, startAngle, endAngle, anticlockwise)<\/code><\/strong>: V\u1ebd cung tr\u00f2n.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9fd190 elementor-widget elementor-widget-code-highlight\" data-id=\"e9fd190\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>ctx.beginPath();\nctx.arc(75, 75, 50, 0, Math.PI * 2);\nctx.fill();\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-20b42ce elementor-widget elementor-widget-heading\" data-id=\"20b42ce\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Thiet_Lap_Mau_Sac_va_Do_Trong_Suot\"><\/span>Thi\u1ebft L\u1eadp M\u00e0u S\u1eafc v\u00e0 \u0110\u1ed9 Trong Su\u1ed1t<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4195477 elementor-widget elementor-widget-text-editor\" data-id=\"4195477\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i m\u00e0u s\u1eafc b\u1eb1ng <code>fillStyle<\/code> v\u00e0 <code>strokeStyle<\/code>, \u0111\u1ed3ng th\u1eddi \u0111i\u1ec1u ch\u1ec9nh \u0111\u1ed9 trong su\u1ed1t v\u1edbi <code>globalAlpha<\/code>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c0bf9d7 elementor-widget elementor-widget-code-highlight\" data-id=\"c0bf9d7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>ctx.fillStyle = \"rgba(0, 128, 128, 0.5)\"; \/\/ M\u00e0u xanh l\u1ee5c v\u1edbi \u0111\u1ed9 trong su\u1ed1t 50%\nctx.fillRect(200, 100, 100, 100);\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbe6ce1 elementor-widget elementor-widget-heading\" data-id=\"cbe6ce1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"Ung_Dung_Thuc_Te_cua_Canvas\"><\/span>\u1ee8ng D\u1ee5ng Th\u1ef1c T\u1ebf c\u1ee7a Canvas<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-361bfa7 elementor-widget elementor-widget-text-editor\" data-id=\"361bfa7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Canvas h\u1eefu \u00edch cho vi\u1ec7c:<\/p><ul><li>V\u1ebd \u0111\u1ed3 th\u1ecb d\u1eef li\u1ec7u<\/li><li>T\u1ea1o h\u00ecnh \u1ea3nh \u0111\u1ed9ng c\u01a1 b\u1ea3n<\/li><li>Thi\u1ebft k\u1ebf tr\u00f2 ch\u01a1i tr\u1ef1c tuy\u1ebfn<\/li><li>T\u1ea1o c\u00e1c hi\u1ec7u \u1ee9ng \u0111\u1ed3 h\u1ecda tr\u00ean trang web<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fd3bcb elementor-widget elementor-widget-text-editor\" data-id=\"0fd3bcb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>V\u1edbi nh\u1eefng ki\u1ebfn th\u1ee9c c\u01a1 b\u1ea3n n\u00e0y, b\u1ea1n \u0111\u00e3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u t\u1ea1o c\u00e1c h\u00ecnh \u1ea3nh v\u00e0 \u0111\u1ed3 h\u1ecda tr\u00ean trang web c\u1ee7a m\u00ecnh b\u1eb1ng Canvas!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Canvas l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd c\u1ee7a HTML5, gi\u00fap b\u1ea1n t\u1ea1o ra \u0111\u1ed3 h\u1ecda tr\u1ef1c ti\u1ebfp tr\u00ean trang web b\u1eb1ng JavaScript. \u0110\u00e2y l\u00e0 l\u1ef1a ch\u1ecdn ph\u1ed5 bi\u1ebfn \u0111\u1ec3 v\u1ebd h\u00ecnh \u1ea3nh, \u0111\u1ed3 th\u1ecb, v\u00e0 th\u1eadm ch\u00ed l\u00e0 tr\u00f2 ch\u01a1i \u0111\u01a1n gi\u1ea3n. B\u00e0i vi\u1ebft n\u00e0y s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1ch s\u1eed d\u1ee5ng Canvas cho ng\u01b0\u1eddi m\u1edbi [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2837,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,48],"tags":[35,65],"class_list":["post-2836","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cong-nghe","category-lap-trinh","tag-html-meta-tag","tag-javascript"],"acf":[],"jetpack_featured_media_url":"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/11\/1702679902913.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/comments?post=2836"}],"version-history":[{"count":4,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2836\/revisions"}],"predecessor-version":[{"id":2841,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2836\/revisions\/2841"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media\/2837"}],"wp:attachment":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media?parent=2836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/categories?post=2836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/tags?post=2836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}