Maison >interface Web >Tutoriel H5 >Comment dessiner un cercle dans un canevas HTML5 ? (exemple de code)

Comment dessiner un cercle dans un canevas HTML5 ? (exemple de code)

不言original: 2018-12-04 10:51:298813parcourir

Le canevas peut être utilisé pour dessiner divers graphiques, alors comment utiliser le canevas HTML5 pour dessiner un cercle ? Cet article vous présentera la méthode de dessin de cercles sur un canevas HTML5. Jetons un coup d'œil au contenu spécifique.

HTML5 canvas

Regardons directement l'exemple

Le code est le suivant

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />

  <script type="text/javascript">
       function draw() {
          var canvas = document.getElementById(&#39;SimpleCanvas&#39;);

          if ( ! canvas || ! canvas.getContext ) {
            return false;
          }

          var cx = 360;
          var cy = 400;
          var radius = 36;

          var context = canvas.getContext(&#39;2d&#39;);
          context.beginPath();
          context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
          context.fillStyle = &#39;#9fd9ef&#39;;
          context.fill();
          context.lineWidth = 1;
          context.strokeStyle = &#39;#00477d&#39;;
          context.stroke();

      }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

Le résultat courant

Exécutez ce qui précède sur le fichier HTML du navigateur. L'effet suivant sera affiché

HTML5 canvas

Enfin, les coordonnées du cercle données par la méthode arc() sont les coordonnées centrales du cercle.

Dans le code HTML ci-dessus, définissez la partie dessin sur le code suivant.

L'effet d'affichage du code ci-dessus est le suivant. Vous pouvez voir que la coordonnée centrale est le centre du cercle.

function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
          return false;
    }
    var cx = 360;    
    var cy = 400;    
    var radius = 36;
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
    context.fillStyle = &#39;#9fd9ef&#39;;
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = &#39;#00477d&#39;;
    context.stroke(); 
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(cx, cy);
    context.stroke();
    }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment dessiner un rectangle à l'aide d'un canevas HTML5Article suivant：Comment dessiner un rectangle à l'aide d'un canevas HTML5

Articles Liés

Voir plus