يصف مثال المقالة طريقة رسم الأنماط الإهليلجية بواسطة 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 = new = Array ("#000000" ، "#A52A2A" ، "#B8860B" ، "Pink" ، "Green" ، "Yellow" ، "Red" ، "Orange" ، "#BB008B" ، "#8B0000") ؛ وظيفة recbackground () {var canvashide = document.getElementById ("Hide") ؛ // hidden canvas var g = canvashide.getContext ("2d") ؛ // اكتشف فرشاة القماش المخفي Hide G.ClearRect (0،0،1200،800) ؛ // قم بتنظيف القماش المخفي var i = 0 ؛ do {// ارسم الحديقة حيث تكون الألوان المختلفة متحدة المركز وتباين في التسلسل G.BeginPath () ؛ var grd = g.createDialGradient (300،300،300-i*25 ، 300،300،265-i*25) ؛ grd.addcolorstop (0 ، col [(0+i+ticker) ٪ col.length]) ؛ grd.addcolorstop (1 ، col [( 1+i+ticker) ٪ col.length]) ؛ g.fillstyle = grd ؛ g.arc (300،300،300-i*25،0،2*math.pi) ؛ g.fill () ؛ i ++ ؛} بينما (أنا <11) ؛ // اكتشف فرشاة القماش الصريح mycanvas gg var gg = document.getElementById ("mycanvas"). getContext ("2d") ؛ gg.clearrect (0،0 ، mycanvas.width ، mycanvas.height) ؛ . Sticker ++ ؛} preperation () {setInterval ('screenCround ()' ، 1000) ؛ } </script> <style> #mycanvas {الموضع: Absolute ؛ اليسار: 0px ؛ أعلى: 0px ؛}#إخفاء {display: none ؛} </style> </head> <body onload = "preperation ()"> <canvas id = "mycanvas"> </tanvas> <canvas id = "hide"> </sanvas> </body> </html>آمل أن تكون هذه المقالة مفيدة لبرمجة الويب للجميع.