Home >Web Front-end >H5 Tutorial >Introduction to examples of drawing circles on canvas in HTML5
Use arc in canvas to draw circular patterns. The function prototype is: context.arc(x, y, radius, start angle, end angle, whether to rotate counterclockwise); so you can draw an arc by modifying the start angle and end angle.
The code is as follows:
<!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>
The picture above shows three circles drawn tossing each other. In addition, you can directly modify the starting angle and ending arc to draw an arc.
The above is the detailed content of Introduction to examples of drawing circles on canvas in HTML5. For more information, please follow other related articles on the PHP Chinese website!