• 0

كيف أرسم دائرة بالاعتماد على html؟

أريد رسم شكل دائرة على صفحة html، هل سأضطر إلى استخدام Jquery أم يمكن الاستغناء عنها ؟ كيف ذلك؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

يمكن استعمال تنسيق css للوصول إلى رسم دائرة على صفحة html، بالطريقة التالية:

  • وضع وسم فارغ مع id للتمكن من الوصول إلى الوسم من خلال css:
<div id="circle"></div>
  • في ملف التنسيقcss، سنستعمل خاصية border-radius بحيث نعطي هذه الخاصية قيمة تساوي نصف قيمة widthو height مما سيجعل شكل الوسم يظهر كدائرة، وهذا هو كود ملف التنسيق css:
#circle {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px; 
}

كما يمكن استعمال canvas لرسم الدائرة، وذلك بالطريقة التالية:

<canvas id="circlecanvas" width="100" height="100"></canvas>
<script>
  var canvas = document.getElementById("circlecanvas");
  var context = canvas.getContext("2d");
  context.arc(50, 50, 50, 0, Math.PI * 2, false);
  context.fill()
</script>

وأيضا عن طريق svg:

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="red" />
</svg>

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن