<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>requestAnimation取代setInterval</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="200px" height="200px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
function draw(){
    var canvas=document.getElementById('myCanvus');
    canvas.width=200;
    canvas.height=200;
    context=canvas.getContext('2d');    

    animate();
};

var delta=0;
var contex;
function animate(){
    context.clearRect(0,0,200,200);// 清屏
    delta+=1;

    // 画线
    context.strokeStyle = "black";
    context.save();
    context.translate(100,100);
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(100*Math.cos(getRad(delta)),100*Math.sin(getRad(delta)));
    context.stroke();
    context.closePath();
    context.restore();

    // 让浏览器自行决定帧速率，这种方式比setInterval和setTimeout要合理
    window.requestAnimationFrame(animate);
}

// 角度得到弧度
function getRad(degree){
        return degree/180*Math.PI;
}

//-->
</script>

HTML5 Canvas 用requestAnimation取代setInterval的更多相关文章

  1. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  2. html5 canvas常用api总结(一)

    1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...

  3. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

  4. html5 canvas用动画的形式装载图像

    本示例使用HTML5 canvas,简单的编写了装载图片效果, 请使用支持HTML5的浏览器预览效果: 下图为以逐渐横向栅格的效果图 html部分: <!DOCTYPE html> < ...

  5. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

  6. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  7. HTML5 Canvas绘文本动画（使用CSS自定义字体）

    一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...

  8. 使用 HTML5 canvas 绘制精美的图形

    HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...

  9. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. 用基于类的通用视图处理表单（Class-based generic views）

    处理表单通常包含3步: 初始化GET(空白的后者预填充的表单) POST非法数据(通常重新显示带有错误信息的表单) POST合法数据(提交数据并重定向) 为了将你从这些烦人的重复步骤中解救出来,Dja ...

  2. 创建型设计模式之单例模式(Singleton)

     结构 意图 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 适用性 当类只能有一个实例而且客户可以从一个众所周知的访问点访问它时. 当这个唯一实例应该是通过子类化可扩展的,并且客户应该无需更 ...

  3. 搜索水题四连发_C++

    特别声明:以下题目有部分为原创题,涉及版权问题,不得转载,违者追究 法律责任! 话说这是一套神题,只有你想不到,没有你做不到 题目更正后比 Pascal 跑得还快哈~ 一道特别裸,但是特别坑的搜索题 ...

  4. UVA 10910 Marks Distribution

    题意 把数字T分成N个数的和,保证这N个数中最小的数大于P.求方案数目 另f[i][j]表示把i分成j个数的和的方案数 f[i][j]=f[i][j-1]+f[i-1][j-1]+f[i-2][j-1 ...

  5. 如何使用python查看视频的长度

    import subprocess import re def get_length(filename): result = subprocess.Popen(["ffprobe" ...

  6. python 去除列表重复元素方法汇总

    1.使用set集合,虽然去除掉重复元素,但是顺序改变了 耗时约4.0*10^-5 s A = ['a','b','X','a','b','G'] B = list(set(A)) print(A)[' ...

  7. ASPOSE.WORD 另存为HTML

    var fi = new FileInfo(Environment.CurrentDirectory + "\\AE9302C0-AE48-4F4B-8489-6A428D9163C9_AL ...

  8. 转 linux任务调度之crontab命令

    crontab命令常见于Unix和Linux的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于"crontab"文件中,以供之后读取和执行. 在 ...

  9. 学习sphinx

    在我们php开发中如何使用sphinx技术? 答:对应MySQL数据库中的字段,就是将字段中的中文信息拆分成多个词语,然后对这些词语建立索引.以后查询的时候,先去查询这些索引文件,然后返回这些满足条件 ...

  10. 「kuangbin带你飞」专题十五 数位DP

    传送门 A.CodeForces - 55D Beautiful numbers 题意 一个正整数是 漂亮数 ,当且仅当它能够被自身的各非零数字整除.我们不必与之争辩,只需计算给定范围中有多少个漂亮数 ...