home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วาง HTML Canvas Element เป็นพื้นหลังหน้าเว็บ (Background)

ใช้ CSS Position Fixed/Absolute + z-index ติดลบ

CSS

canvas {
    position: fixed; /* หรือ absolute */
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1; /* อยู่ด้านหลังเนื้อหาทั้งหมด */
    pointer-events: none; /* ไม่บังการคลิก (ถ้าต้องการ) */
}

หรือ Wrapper Div

<style>
#canvasSection { position: fixed; top:0; left:0; width:100%; height:100%; z-index:-1; }
</style>
<div id="canvasSection"><canvas id="myCanvas"></canvas></div>

Canvas จะอยู่เบื้องหลังเนื้อหา ทำงานเป็น Background Animation ได้