用canvas绘制一个圆形,实现绕着一个中心运动

实现效果 使用canvas绘制一个圆形,实现绕着一个中心,轨迹类似于走一个椭圆的轨迹那样路线,并且实现漂浮的效果。

这里只是一个实例Demo,直接运行就可以,下面附上代码:



<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 title>
    <style type="text/css">
        @keyframes animX{
            0% {left: 0px;}
            100% {left: 500px;}
        }
        @keyframes animY{
            0% {top: 0px;}
            100% {top: 500px;}
        }

        #ball {
            width: 100px;
            height: 100px;
            background-color: #f99;
            border-radius: 50%;
            position: absolute;
            animation:animX 4s ease-in-out -2s infinite alternate, animY 4s ease-in-out infinite alternate;
        }
    style>
head>
<body>
<div id="ball">div>
body>
html>

你可能感兴趣的:(前端开发)