{"id":284,"date":"2025-12-25T11:12:37","date_gmt":"2025-12-25T04:12:37","guid":{"rendered":"https:\/\/uynghi.com\/?p=284"},"modified":"2025-12-25T11:13:44","modified_gmt":"2025-12-25T04:13:44","slug":"hieu-ung-phao-hoa-effect-firework-bang-javascript","status":"publish","type":"post","link":"https:\/\/uynghi.com\/hieu-ung-phao-hoa-effect-firework-bang-javascript\/","title":{"rendered":"Hi\u1ec7u \u1ee9ng ph\u00e1o hoa (Effect Firework) b\u1eb1ng Javascript"},"content":{"rendered":"\n

Hi\u1ec7u \u1ee9ng ph\u00e1o hoa b\u1eb1ng JavaScript l\u00e0 m\u1ed9t trong nh\u1eefng \u0111o\u1ea1n code th\u00fa v\u1ecb v\u00e0 tr\u1ef1c quan nh\u1ea5t trang tr\u00ed cho website trong nh\u1eefng d\u1ecbp T\u1ebft \u0111\u1ebfn. Thay v\u00ec s\u1eed d\u1ee5ng c\u00e1c h\u00ecnh \u1ea3nh c\u00f3 s\u1eb5n, hi\u1ec7u \u1ee9ng n\u00e0y \u0111\u01b0\u1ee3c t\u1ea1o ra ho\u00e0n to\u00e0n b\u1eb1ng m\u00e3 ngu\u1ed3n th\u00f4ng qua HTML5 Canvas.<\/p>\n\n\n\n

S\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c requestAnimationFrame()<\/code>, JavaScript c\u00f3 th\u1ec3 render h\u00e0ng ng\u00e0n h\u1ea1t c\u00f9ng l\u00fac v\u1edbi t\u1ed1c \u0111\u1ed9 60 khung h\u00ecnh\/gi\u00e2y (60 FPS), t\u1ea1o ra chuy\u1ec3n \u0111\u1ed9ng m\u01b0\u1ee3t m\u00e0 m\u00e0 kh\u00f4ng l\u00e0m lag tr\u00ecnh duy\u1ec7t. Vi\u1ec7c thao t\u00e1c v\u1edbi m\u00e3 m\u00e0u HSL (Hue, Saturation, Lightness) gi\u00fap vi\u1ec7c t\u1ea1o ra nh\u1eefng d\u1ea3i m\u00e0u s\u1eafc r\u1ef1c r\u1ee1 v\u00e0 ng\u1eabu nhi\u00ean tr\u1edf n\u00ean c\u1ef1c k\u1ef3 \u0111\u01a1n gi\u1ea3n.<\/p>\n\n\n\n

B\u01b0\u1edbc 1: <\/p>\n\n\n\n

Nh\u00fang tr\u1ef1c ti\u1ebfp trong th\u1ebb\u00a0<script><\/code>\u00a0\u1edf\u00a0<head><\/code>\u00a0ho\u1eb7c\u00a0<body><\/code><\/p>\n\n\n\n

Download m\u00e3 firework.js<\/a> v\u1ec1 m\u00e1y:<\/p>\n\n\n\n

\n

<script type=”text\/javascript” src=”path-to-file\/firework.js”><\/script><\/p>\n<\/blockquote>\n\n\n\n

ho\u1eb7c s\u1eed d\u1ee5ng link tr\u1ef1c ti\u1ebfp:<\/p>\n\n\n\n

\n

<script type=”text\/javascript” src=”https:\/\/lyminhhoang.com\/asset\/js\/firework.js”><\/script><\/p>\n<\/blockquote>\n\n\n\n

B\u01b0\u1edbc 2:<\/p>\n\n\n\n

Ch\u00e8n \u0111o\u1ea1n html<\/code> sau v\u00e0o sau th\u1ebb body<\/p>\n\n\n\n

\n

<canvas id=”canvas” style=’position:fixed;width:100%;pointer-events:none;z-index:9999;’><\/canvas><\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Hi\u1ec7u \u1ee9ng ph\u00e1o hoa b\u1eb1ng JavaScript l\u00e0 m\u1ed9t trong nh\u1eefng \u0111o\u1ea1n code th\u00fa v\u1ecb v\u00e0 tr\u1ef1c quan nh\u1ea5t trang tr\u00ed […]<\/p>\n","protected":false},"author":13,"featured_media":287,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-284","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-huong-dan"],"views":300,"_links":{"self":[{"href":"https:\/\/uynghi.com\/rest-api\/wp\/v2\/posts\/284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uynghi.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uynghi.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uynghi.com\/rest-api\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/uynghi.com\/rest-api\/wp\/v2\/comments?post=284"}],"version-history":[{"count":3,"href":"https:\/\/uynghi.com\/rest-api\/wp\/v2\/posts\/284\/revisions"}],"predecessor-version":[{"id":288,"href":"https:\/\/uynghi.com\/rest-api\/wp\/v2\/posts\/284\/revisions\/288"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uynghi.com\/rest-api\/wp\/v2\/media\/287"}],"wp:attachment":[{"href":"https:\/\/uynghi.com\/rest-api\/wp\/v2\/media?parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uynghi.com\/rest-api\/wp\/v2\/categories?post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uynghi.com\/rest-api\/wp\/v2\/tags?post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}