Cirkel HTML Canvas

Exempel

Din webbläsare stöder inte HTML5 canvas-taggen. 
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Prova det själv

Rita en cirkel

För att rita en cirkel på canvas, använd följande metoder:

  • beginPath() - Börja med en bana
  • arc(x,y,r,start,end) - Definiera cirkel
  • stroke() - Rita

arc(x,y,r,start,end) - Skapa en båge (kurva).

För att skapa en cirkel, ställ in startvinkeln till 0 och slutvinkeln till 2 * Math.PI.

x och y-variablerna definierar koordinaterna för cirkelns mittpunkt.

r-parametern definierar cirkelns radie.

Se också:

Komplett Canvas-referenshandbok för CodeW3C.com