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

来源：互联网发布：洛克人网络争霸战01 编辑：程序博客网时间：2024/05/18 03:11

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

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

<!doctype html><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>

0 0

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

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

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

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