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!
what is h5
What are the production methods of html5 animation production?
The difference between HTML and HTML5
How to implement h5 to slide up and load the next page on the web side
How to register on Matcha Exchange
How to pass value to vue component
The difference between official replacement phone and brand new phone
How to modify coordinates in matlab
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
