ตัวอย่างบทความนี้อธิบายวิธีการวาดรูปแบบรูปไข่โดย JS+HTML5 HTML5 Canvas ไม่มีวิธีการวาดรูปไข่ รหัสต่อไปนี้สามารถวาดรูปวงรี มันถูกแชร์กับคุณสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
1. บนผืนผ้าใบโดยปริยาย (กำหนด CSS เป็น: แสดง: ไม่มี;)
2. วาดภาพของผืนผ้าใบโดยนัยที่มีอัตราส่วนต่าง ๆ บนผืนผ้าใบที่ชัดเจนอื่นเพื่อเปลี่ยนสวนให้เป็นวงรี
3. นอกจากนี้เพิ่มฟังก์ชั่นแอนิเมชั่น
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> พื้นหลังสีทดสอบ </title> <script> var ticker = 0; var col = new อาร์เรย์ ("#000000", "#A52A2A", "#B8860B", "Pink", "Green", "Yellow", "Red", "Orange", "#BB008B", "#8B0000"); ฟังก์ชั่น Drawbackground () {var canvashide = document.getElementById ("ซ่อน"); // Hidden Canvas var g = canvashide.getContext ("2d"); // ค้นหาแปรงของผืนผ้าใบที่ซ่อนอยู่ซ่อน g g.clearrect (0,0,1200,800); // ทำความสะอาดผืนผ้าใบที่ซ่อนอยู่ var i = 0; ทำ {// วาดสวนที่มีสีต่างกันเป็นศูนย์กลางและแตกต่างกันในลำดับ g.beginpath (); var grd = g.createradialgradient (300,300,300-i*25 300,300,265-i*25); grd.addcolorstop (0, col [(0+i+ticker)%col.length]); grd.addcolorstop (1, col [((((((1, col) 1+i+ticker)%col.length]); g.fillstyle = grd; g.arc (300,300,300-i*25,0,2*math.pi); g.fill (); i ++;}; ในขณะที่ (i <11); // ค้นหาแปรงของผ้าใบที่ชัดเจน mycanvas gg var gg = document.getElementById ("Mycanvas") getContext ("2d"); gg.clearrect (0,0, mycanvas.width, mycanvas.height); // ทำความสะอาดผืนผ้าใบที่ชัดเจน/ * วาดภาพสวนของผืนผ้าใบโดยปริยายที่มีขนาดความกว้าง 600 และความสูง 300, * วาดไปที่ Mycanvas ผืนผ้าใบที่ชัดเจน * เป็นผลให้ภาพสวนของผืนผ้าใบโดยนัยที่มีรูปวงรี ticker ++;} ฟังก์ชั่น preperation () {setInterval ('diskingground ()', 1000); } </script> <style> #mycanvas {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0px; ด้านบน: 0px;}#ซ่อน {display: none;} </style> </head> <body onload = "preperation ()"> <canvas id = "mycanvas"> </anvas> <canvas id = "ซ่อน"> </canvas>ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรมเว็บของทุกคน