Canvas draws circles and ellipses
Context context's arc method is to draw a circle or ellipse. The x and y parameters of the arc method are the center coordinates of the circle, radius is the radius, startAngle and endAngle are the starting angle and ending angle of the sector (expressed in radians), anticlockwise Indicates whether the drawing should be drawn counterclockwise (true) or clockwise (false).
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>huatu</title>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
context.beginPath();//开始绘制路径
//绘制以 （60,60）为圆心，50为半径长度，从0度到360度（PI是180度），最后一个参数代表顺时针旋转。
context.arc(60, 60, 50, 0, Math.PI * 2, true);
context.lineWidth = 2.0;//线的宽度
context.strokeStyle = "#000";//线的样式
context.stroke();//绘制空心的，当然如果使用fill那就是填充了。
</script>
</body>
</html>
new file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>huatu</title>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
context.beginPath();//开始绘制路径
//绘制以 （60,60）为圆心，50为半径长度，从0度到360度（PI是180度），最后一个参数代表顺时针旋转。
context.arc(60, 60, 50, 0, Math.PI * 2, true);
context.lineWidth = 2.0;//线的宽度
context.strokeStyle = "#000";//线的样式
context.stroke();//绘制空心的，当然如果使用fill那就是填充了。
</script>
</body>
</html>
Preview
Clear
- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
Let's briefly talk about starting a business in PHP
Quick introduction to web front-end development
Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things
Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]
Login verification and classic message board
Computer network knowledge collection
Quick Start Node.JS Full Version
The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)