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>
canvas三角函数做椭圆运动效果的更多相关文章
- canvas三角函数模拟水波效果
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- canvas动态小球重叠效果
前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...
- 酷!使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客
Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼
- 基于HTML5 Canvas可撕裂布料效果
分享一款布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 在线预览 源码下载 实现的代码. ...
- Canvas 动态小球重叠效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- PPT做交互效果
1 做交互效果(点击一个按钮,弹出某个框或者跳转到某个页面)其实就是若干个PPT页面,利用给按钮增加超链接或者动作 达到点击一个按钮 跳转到另外一个PPT的效果. 2 选择一个形状组件(或者其他组件) ...
随机推荐
- [转]Asp.net MVC使用Filter解除Session, Cookie等依赖
本文转自:http://www.cnblogs.com/JustRun1983/p/3279139.html 本文,介绍了Filter在MVC请求的生命周期中的作用和角色,以及Filter的一些常用应 ...
- 再不写,我怕就再也不写了-LAMP基础
hi 经历了4天大餐的洗礼,整个人都思密达了...昨天的懒,是没有原因的懒,总之就是该提笔了亲 1.Ubuntu下的LAMP配置 -----Ubuntu基础知识----- ----管理员权限 出于安全 ...
- JavaSE之概述与基本语法
嘛,这个本来应该发在OOP之前的,无所谓了,补发一下,这篇文章只会对JavaSE的语法做一个基本的概述而已,我会在最近新开一个新坑,也就是JavaEE系列,以后还会有Cpp(相对于C++,我还是更喜欢 ...
- 第8章 用户模式下的线程同步(4)_条件变量(Condition Variable)
8.6 条件变量(Condition Variables)——可利用临界区或SRWLock锁来实现 8.6.1 条件变量的使用 (1)条件变量机制就是为了简化 “生产者-消费者”问题而设计的一种线程同 ...
- 使用while循环语句和变量输出九九乘法表
输出的结果如下:
- [No000023]为何没有更多人从事程序员的工作?程序员常有,优秀程序员不常有!
成为优秀的程序员是极其困难的,并且这个过程不可能一蹴而就. 我们不可能期待去种一些树,然后一夜间收获有着2000年树龄的红杉树,无论其需求有多大. 人格特点 一个人首先得是自学者来学习编程.仅仅是超过 ...
- js获取可视区大小和页面大小的兼容性写法
var getPageSize = function() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { ...
- http协议(三)几种数据传输方式
说说http协议的一些特点: 1)无状态 http协议是一种自身不对请求和响应之间的通信状态进行保存的协议,即无状态协议. 这种设置的好处是:更快的处理更多的请求事务,确保协议的可伸缩性 不过随着we ...
- 实例讲解表单验证插件Validation的应用
jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性.现在 结合实际情况,我把项目中经常要用到的验证整理成一个实例 ...
- 图片上传功能<转>http://blog.csdn.net/u011159417/article/details/50126023
以前也实现过上传,只不过每次都是,写完之后没有总结,下次遇到时,还要重新写,重新调式,很是浪费时间,所以,今天实现一个上传图片的功能,包括简单的页面和servlet,下次再要写这个功能时,直接拿过来就 ...