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
What software is Penguin?
Free website source code
How to remove people from the blacklist on WeChat
How to implement linked list in go
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
