ไม่ได้ตั้งใจจะสอนแคนวาส แค่ดู เพราะคิดว่ามันสนุก
มันหมายความว่ามันหยาบนิดหน่อย ดังนั้นอย่าวิพากษ์วิจารณ์ฉัน -
ผลอัตราเฟรมลดลงเล็กน้อย แต่ประสิทธิภาพจริงจะราบรื่นกว่ามากแน่นอน
ใช้งาน HTML
<!DOCTYPE html><head> <meta name=viewport content=width=device-width, user-scalable=no, Initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0> <style> * { ระยะขอบ: 0; ช่องว่างภายใน: 0;} ร่างกาย {สีพื้นหลัง: สีฟ้าอ่อน;} #canvas {สีพื้นหลัง: สีดำ; ความกว้าง: 100vw;} </style></head><body> <canvas id=canvas></canvas> <script>/* ดูด้านล่าง*/</script></body>จส
window.onload = function () { la // Canvas ctx = document.getElementById('canvas').getContext('2d'), // ขนาดผ้าใบ canvas_width = document.getElementById('canvas').width, canvas_height = document .getElementById('canvas').height, // สีข้อความ, แบบอักษร, สีพื้นหลังของไอคอน DVD text_color = ['green', 'สีน้ำเงิน', 'สีม่วง', 'สีเหลือง', 'สีขาว', 'สีเหลือง', 'สีขาว'], text_font = 'ตัวหนาตัวเอียง 50px yahei', background_color = ['สีแดง', 'สีส้ม', 'สีเหลือง', ' green', 'blue', 'indigo', 'violet'], // ขนาดของสี่เหลี่ยมผืนผ้าพื้นหลัง background_width = 110, background_height = 50, // เมื่อเพิ่มข้อความลงในสี่เหลี่ยมผืนผ้า ความสูงจะเบี่ยงเบนเล็กน้อย fix_height = 7, // ความเร็ว, การวาดใหม่แต่ละครั้งจะเคลื่อนที่ 0.5 px speed_x = 0.5, speed_y = 0.5, // ทิศทางการเคลื่อนที่ โดยเริ่มแรก 'rb' ทิศทางขวาล่าง = 'rb', // ไอคอนพิกัด x และ y เริ่มแรก 0 ตำแหน่ง_x = 0, ตำแหน่ง_y = 0, // จำนวนการชนกัน ใช้ในการคำนวณจำนวนสีพื้นหลังและข้อความ = 0 dvd() ฟังก์ชั่น dvd () { // สวิตช์ทิศทางการเคลื่อนที่ (ทิศทาง) { // ตัวพิมพ์ขวาล่าง 'rb': ตำแหน่ง_x += speed_x ตำแหน่ง_y += ตัวแบ่ง speed_y // ตัวพิมพ์ขวาบน 'rt': ตำแหน่ง_x += speed_x ตำแหน่ง_y -= ตัวแบ่ง speed_y / / ตัวพิมพ์ด้านซ้ายล่าง 'lb': ตำแหน่ง_x -= speed_x position_y += ตัวแบ่ง speed_y // ตัวพิมพ์ด้านซ้ายบน 'lt': ตำแหน่ง_x -= speed_x position_y -= speed_y break } // ล้างผ้าใบ ctx.clearRect(0, 0, canvas_width, canvas_height) // วาดใหม่ ctx.fillRect(position_x, position_y, background_width, background_height) // การตรวจจับการชนกัน // ด้านล่างถ้า (position_y + background_height > = canvas_height) { ทิศทาง = ทิศทางแทนที่ ('b', 't') // จำนวนการชนกัน += 1 } // ขวา ถ้า (position_x + พื้นหลังความกว้าง >= canvas_width) { ทิศทาง = ทิศทาง.แทนที่('r', 'l') นับ += 1 } // ซ้าย ถ้า (position_x < 0) { ทิศทาง = ทิศทาง.แทนที่(' l', 'r') นับ += 1 } // บนถ้า (position_y < 0) { ทิศทาง = ทิศทาง.แทนที่('t', 'b') นับ += 1 } // ข้อความ ctx.font = text_font ctx.fillStyle = text_color[count % 7] ctx.fillText(DVD,position_x,position_y + background_height - fix_height) // สีพื้นหลัง ctx.fillStyle = background_color[count % 7] // เริ่มหน้าต่างแอนิเมชั่น ขอAnimationFrame (ดีวีดี) }}ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network