Steps to achieve:

First, create an HTML canvas and a JavaScript animation function.
Draws a circle on the canvas.
Define a variable to represent the coordinates of the center of the circle and the radius.
Make an animation loop to update the coordinates of the center of the circle so that it moves along the outer circle.
Use trigonometric functions such as sin and cos to calculate the coordinates of the center of the circle.

Here is the sample code: (You can adjust the radius, angular velocity, and starting angle of the circle as needed.)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		</style>
	</head>
	<body>
		<canvas id="myCanvas1" width="400" height="400"></canvas>
	</body>
</html>
<script>
    let canvas = document.querySelector("#myCanvas1");
    var ctx = canvas.getContext('2d');

    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var R = 100;

    var angle = 0; // 初始角度
    var speed = 0.05; // 运动速度

    function animate() {
        requestAnimationFrame(animate);
        

        // 计算圆心坐标
        var x = centerX + Math.cos(angle) * R;
        var y = centerY + Math.sin(angle) * R;
        
        // 绘制圆
        ctx.beginPath();
        ctx.arc(x, y, 10, 0, 2*Math.PI);
        ctx.fillStyle = "red";
        ctx.fill();
        
        // 更新角度
        angle += speed;
    }
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    animate();



</script>

1. Introduction to canvas

It is a new tag of h5, indicating that the canvas is a native one that does not require other three-party operations

js must be used to compose its canvas canvas itself is a container js is a brush

Canvas has two important attributes width height

Canvas uses a lot of captcha charts to operate screenshots on the tablet (sign a contract). . .

<canvas width="200" height="300"></canvas> 
/* 宽和高是2个独立的属性，写法是属性=“数值” ，数字不带单位；推荐使用属性设置宽高 */

<canvas style="width:300px;height:400px"></canvas> 
/* 不要这样写 这样写的style属性是的css样式,样式的值的单位带px */

Two, canvas rendering

canvas的渲染得用js

1. 获得canvas操作权限 let canvas = document.querySelecter("元素") ...

2. 获得绘画能力 let context = canvas.getContext("2d");

3. 调用绘画能力来对canvas进行操作

注意 : 不要用样式给canvas设置宽高要用属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .canvas1{
            border: 2px solid black;
        }
        p{
            font: 30px "宋体";
        }
    </style>
</head>
<body>
    <canvas width="400" height="400" class="canvas1"></canvas>
    <p>测试字体样式</p>
</body>
<script>
    let canvas1 = document.querySelector(".canvas1");
    let context1 = canvas1.getContext("2d");

    context1.font = "50px '华文行楷'"; //字体大小及样式
     context1.fillStyle = "#6260e8";   //填充颜色
     context1.fillText("李桥桉",100,50); //内容及坐标

    context1.strokeStyle = "#ff0000";  //描边颜色
    context1.strokeText("李桥桉",100,100);
</script>
</html>

Three, canvas style

填充 fill => fillStyle

描边 stroke => strokeStyle

样式是有顺序的画完再给样式，需要先设置样式后有字体文本

描边案例

context1.font = "50px '华文行楷'"// 字体设置参照css font

context1.fillStyle = "#ff0000" // 填充颜色

context1.fillText("李桥桉",100,50) // 填充

context1.strokeStyle = "#0000ff" // 描边颜色

context1.strokeText("Joan",150,100)// 描边

设置透明度

context1.globalAlpha = 0.1; // opcity 取值 0-1

context1.shadowColor = "#000" // 设置阴影颜色

context1.shadowBlur = 0.5; // 阴影级别

context1.shadowOffsetX = 10; // 阴影的x轴偏移

context1.shadowOffsetY = 10; // 阴影的y轴偏移

以上样式不仅可以设置给文字，还可以设置给其他元素

填充样式影响与填充相关的操作 fillStyle => fillText fill

描边样式对应描边 strokeStyle => strokeText stroke

Four, canvas path (line)

Two points on a straight line make up the start position and end position

starting point moveTo(x,y)

End point lineTo(x,y) There can be multiple end points

Canvas realizes a triangle (inverted triangle)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .canvas1{
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" class="canvas1"></canvas>
</body>
<script>
    let canvas1 = document.querySelector(".canvas1");
    let context1 = canvas1.getContext("2d");

    context1.beginPath();//开启一个新路径，与之前的断开联系
    context1.strokeStyle = "#00f"
    context1.moveTo(10,100);
    context1.lineTo(200,200);
    context1.stroke();

    context1.beginPath();//开启一个新路径，与之前的断开联系
    context1.strokeStyle = "#f00";
    context1.moveTo(200,200);
    context1.lineTo(390,100);
    context1.stroke();

    context1.beginPath();//开启一个新路径，与之前的断开联系
    context1.strokeStyle = "#0f0";
    context1.moveTo(390,100);
    context1.lineTo(10,100);
    context1.stroke();

线样式

context1.lineWidth = 15 // 线粗细
context1.lineCap = "round"; // 线两端类型 "round" 圆弧型（常用）
context1.lineCap = "square"; // 类型 "The square at both ends of the line " is automatically extended a little

    context1.beginPath();//开启一个新路径，与之前的断开联系
    context1.strokeStyle = "#000";
    context1.lineWidth = 15;
    context1.lineCap = "round";
    context1.lineJoin = "round";

    context1.moveTo(20,130);
    context1.lineTo(150,100);
    context1.lineTo(180,180);
    context1.stroke()

context1.lineJoin = "bevel" // 线拐点样式 "round" 圆弧型 "bevel" 切面型

弧样式--JavaScript实现一个圆环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .canvas1{
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" class="canvas1"></canvas>
</body>
<script>
    let canvas1 = document.querySelector(".canvas1");
    let context1 = canvas1.getContext("2d");
    
    context1.beginPath();//开启一个新路径，与之前的断开联系
    context1.arc(200,200,50,0,Math.PI * 2);
    // arc中参数1和参数2代表圆心坐标；参数3代表半径；参数4代表弧度，
    // 参数5代表角度(π代表180°)，参数6为true/false代表顺时针或逆时针

    context1.stroke();

running result

Dynamically draws a circle.

    let i = 0;
    setInterval(() => {
        setTimeout(() => {
            context1.beginPath();
            context1.arc(200,200,50,0,Math.PI * 2);
            context1.stroke();
        },100);
        i += 0.001;

    },400);

Realize an Olympic ring

code show as below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .canvas1{
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <canvas width="800" height="500" class="canvas1"></canvas>
</body>
<script>
    let canvas1 = document.querySelector(".canvas1");
    let context1 = canvas1.getContext("2d");

    context1.beginPath();
    context1.arc(100,100,50,0,Math.PI * 2)
    context1.stroke();

    context1.beginPath();
    context1.arc(180,100,50,0,Math.PI * 2)
    context1.stroke();

    context1.beginPath();
    context1.arc(260,100,50,0,Math.PI * 2)
    context1.stroke();

    context1.beginPath();
    context1.arc(140,180,50,0,Math.PI * 2)
    context1.stroke();

    context1.beginPath();
    context1.arc(220,180,50,0,Math.PI * 2)
    context1.stroke();

</script>
</html>

Five, canvas rectangle

// 绘制矩形 但是需要再次填充。
//参数1代表x轴，参数2代表y轴。参数3代表宽，参数4代表高。
context1.rect(50,50,100,100) 

context1.fill()
context1.stroke() //描边

// Directly draw a solid rectangle
context1.fillRect(50,50,100,100)

// Draw a hollow rectangle directly
context1.strokeRect(50,50,100,100)

// 清空画布
context1.clearRect(0,0,canvas1.width,canvas1.height)

// fillRect strokeRect rect
// 前面二者立即填充或者描边后者需要手动填充或者描边

Canvas realizes dynamic drawing circle effect | Realizes five Olympic rings