Comment utiliser Canvas pour dessiner des cercles creux et des cercles pleins en HTML5

Cet article présente principalement l'utilisation de canevas pour dessiner des cercles creux et des cercles pleins en HTML5. Les amis qui en ont besoin peuvent s'y référer

Ici, je vais partager avec vous un exemple de comment dessiner des cercles creux et. cercles pleins lors de l'apprentissage de la toile. Les exercices sont très simples.

<canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas>

var canvas=document.getElementById("canvas");
     var cxt=canvas.getContext("2d");
     //画一个空心圆
     cxt.beginPath();
     cxt.arc(200,200,50,0,360,false);
     cxt.lineWidth=5;
     cxt.strokeStyle="green";
     cxt.stroke();//画空心圆
     cxt.closePath();
     //画一个实心圆
     cxt.beginPath();
     cxt.arc(200,100,50,0,360,false);
     cxt.fillStyle="red";//填充颜色,默认是黑色
     cxt.fill();//画实心圆
     cxt.closePath();
     //空心和实心的组合
     cxt.beginPath();
     cxt.arc(300,300,50,0,360,false);
     cxt.fillStyle="red";
     cxt.fill();
     cxt.strokeStyle="green";
     cxt.stroke();
     cxt.closePath();

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos des propriétés des lignes de canevas

Comment utiliser le canevas HTML5 mettre en œuvre des flocons de neige qui tombent

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!