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

يمكن استعمال تنسيق 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>