canvas三角函数做椭圆运动效果
<canvas id="canvas" width="800" height="400" style="background-color: #000;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
var centerX=canvas.width/2;
var centerY=canvas.height/2;
var radiusX=200;
var radiusY=50;
function bg(){
cxt.clearRect(0,0,canvas.width,canvas.height)
for(var i=0;i<Math.PI*2;i+=0.1)
{
cxt.beginPath();
cxt.arc(Math.cos(i)*radiusX+centerX,Math.sin(i)*radiusY+centerY,2,0,Math.PI*2,true);
cxt.fillStyle="#fff";
cxt.fill();
cxt.closePath();
}
}
var ra=0;
function radiu(){
cxt.clearRect(0,0,canvas.width,canvas.height);
bg()
cxt.beginPath();
cxt.fillStyle="#fff";
cxt.arc(Math.cos(ra)*radiusX+centerX,Math.sin(ra)*radiusY+centerY,10,0,Math.PI*2,true)
cxt.fill();
cxt.closePath();
ra+=0.01;
requestAnimationFrame(radiu)
}
radiu()
</script>
最新文章
- [LeetCode] Search in Rotated Sorted Array 在旋转有序数组中搜索
- poj 2378 (dijkstra)
- WCF服务与WCF数据服务的区别
- sql遍历树
- Repeater控件的分页效果
- 2013 Asia Hangzhou Regional Contest
- [topcoder]BadNeighbors
- android:layout_weight详解
- C# 中英文符号互转
- CoCos2dx开发:tile地图绘制和Tiled工具的基本使用
- go基本语法
- Java属性中指定Json的属性名称
- 如何通过setTimeout理解JS运行机制详解
- poj 2059 单调栈
- flashfxp v3.7 注册码
- k8s踩坑记第1篇--rc无法创建
- Linux 命令find、grep
- 我认为比较有用的快捷键(Eclipse)
- 关于记录cookie引发的问题
- react组件性能