用canvas绘制一个圆形，实现绕着一个中心运动
生活随笔
收集整理的這篇文章主要介紹了
用canvas绘制一个圆形，实现绕着一个中心运动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現效果 使用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>
總結
以上是生活随笔為你收集整理的用canvas绘制一个圆形，实现绕着一个中心运动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 股票大单中单小单是什么意思 各种量的委托
- 下一篇： canvas的简单实例集合