<!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. linxu安装方式

    安装Linux操作系统的5种方法以及心得这几天没有调别的东西,想起自己还不太会在没有安装光盘的时候安装Linux,于是试了一下Linux的五种安装方法,下面是我的一些 篇一:安装Linux操作系统的5 ...

  2. 戴文的Linux内核专题：03 驱动程序【转】

    转自:http://www.lai18.com/content/432194.html 驱动程序是使内核能够沟通和操作硬件或协议(规则和标准)的小程序.没有驱动程序,内核不知道如何与硬件沟通或者处理协 ...

  3. v4l2读取摄像头程序流程解析【转】

    转自:https://my.oschina.net/u/1024767/blog/210801 v4l2 操作实际上就是 open() 设备, close() 设备,以及中间过程的 ioctl() 操 ...

  4. shell编程学习笔记【原创】

    本文为本人学习笔记,如有转载请注明出处,谢谢 一.Bourne Shell 有如下四种变量: 用户自定义变量 位置变量,即命令行参数 预定义变量 环境变量 二.位置变量 $ 与键入的命令行一样,包含脚 ...

  5. mysql打开文件数太多的解决办法

    http://www.orczhou.com/index.php/2010/10/mysql-open-file-limit/ http://www.cnblogs.com/end/archive/2 ...

  6. ***七牛跨域上传图片JS SDK

    SDK: http://developer.qiniu.com/code/v6/sdk/javascript.html#upload 上传 在页面中引入 plupload,plupload.full. ...

  7. PostgreSQL(EXCEPT,INTERSECT)

    except 可以查看表一对表二不一样的数据,有点像是对表一进行表一表二交集的反集的交集,好绕: intersect 可以查看表一和表二一样的数据,求交集: select t1.name,t1.age ...

  8. HDU 5649.DZY Loves Sorting-线段树+二分-当前第k个位置的数

    DZY Loves Sorting Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Oth ...

  9. HDU 1171 Big Event in HDU【01背包/求两堆数分别求和以后的差最小】

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...

  10. 牛客练习赛16 A 字典序最大的子序列【贪心】

    链接:https://www.nowcoder.com/acm/contest/84/A 来源:牛客网 [出处]:http://codeforces.com/contest/196/problem/A ...