<!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. Windows转移FSMO角色

    转移 FSMO 角色若要使用 Ntdsutil 实用工具转移 FSMO 角色,请按照下列步骤操作:1.登录到基于 Windows 2000 Server 或基于 Windows Server 2003 ...

  2. 转：LinkedHashMap使用(可以用来实现LRU缓存)

    1. LinkedHashMap概述: LinkedHashMap是HashMap的一个子类,它保留插入的顺序,如果需要输出的顺序和输入时的相同,那么就选用LinkedHashMap. LinkedH ...

  3. Android控件点击事件

    1. 介绍 本文介绍了Android控件的点击事件 Android控件点击(onClick)事件可以用如下三种方式来实现 2. 实现onClick方法 在layout的xml中指定onClick方法, ...

  4. Selenium2+python自动化6-八种元素元素定位（Firebug和firepath）【转载】

    前言 自动化只要掌握四步操作:获取元素,操作元素,获取返回结果,断言(返回结果与期望结果是否一致),最后自动出测试报告.本篇主要讲如何用firefox辅助工具进行元素定位.元素定位在这四个环节中是至关 ...

  5. Java程序执行时间

    第一种是以毫秒为单位计算的.  Java代码  //伪代码 long startTime=System.currentTimeMillis();   //获取开始时间 doSomeThing();  ...

  6. 错误整理：容器启动报错com.sun.faces.config.WebConfiguration cannot be cast to com.sun.faces.config....

    错误集锦: 今天用Jboss部署一个web项目的时候报了个奇怪的错误(用Tomcat部署运行良好),错误信息如下:java.lang.ClassCastException: com.sun.faces ...

  7. C# 查看本机安装的NET Framework 版本

    https://docs.microsoft.com/zh-cn/dotnet/framework/migration-guide/how-to-determine-which-versions-ar ...

  8. 华农oj Problem L: CreatorX背英语【STL】

    Problem L: CreatorX背英语 Time Limit: 1 Sec Memory Limit: 64 MB Submit: 53 Solved: 36 [Submit][Status][ ...

  9. HDU-6315 Naive Operations//2018 Multi-University Training Contest 2___1007 (线段树，区间除法)

    原题地址 Naive Operations Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 502768/502768 K (Java/ ...

  10. Codeforces 1027F. Session in BSU

    题目直通车:Codeforces 1027F. Session in BSU 思路: 对第一门考试,使用前一个时间,做标记,表示该时间已经用过,并让第一个时间指向第二个时间,表示,若之后的考试时间和当 ...