Utilisez l'arc dans la toile pour dessiner des motifs circulaires. Le prototype de la fonction est : context.arc(x, y, radius, start angle, end angle, s'il faut tourner dans le sens inverse des aiguilles d'une montre pour pouvoir dessiner un arc en modifiant l'angle de départ et l'angle de fin) ;
Le code est le suivant :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5圆形</title> <script type="text/javascript"> window.addEventListener("load",function(){ //canvas的2d上下文 var ctx=document.getElementById("canvas").getContext("2d"); //圆1 ctx.beginPath(); ctx.arc(150,45,35,0,Math.PI*2,false); ctx.fillStyle="rgba(192,80,77,0.7)";//半透明的红色 ctx.fill(); ctx.strokeStyle="rgba(192,80,77,1)";//红色 ctx.stroke(); //圆2 ctx.beginPath(); ctx.arc(125,95,35,0,Math.PI*2,false); ctx.fillStyle="rgba(155,187,89,0.7)";//半透明绿色 ctx.fill(); ctx.strokeStyle="rgba(155,187,89,1)";//绿色 ctx.stroke(); //圆3 ctx.beginPath(); ctx.arc(175,95,35,Math.PI*2,false); ctx.fillStyle="rgba(128,100,162,0.7)";//半透明的紫色 ctx.fill(); ctx.strokeStyle="rgba(128,100,132,1)";//紫色 ctx.stroke(); }); </script> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> </html>
L'image ci-dessus montre trois cercles dessinés se jetant. De plus, vous pouvez modifier directement l'angle de départ et l'arc final pour dessiner un arc.
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!