<!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. async-http

    android-async-http开源框架可以是我们轻松的获取网络数据或者向服务器发送数据,使用起来也很简单,下面做简单介绍,具体详细使用看官网:https://github.com/loopj/a ...

  2. 乌班图 root权限获取

    点击左侧终端标 2 出现命令提示符 3 首先输入:sudo passwd root(设置root密码) 4 输入当前系统的账户密码(账户:admin-pc的密码) 5 输入新的root密码,确认新密码 ...

  3. mac使用基础

    Mac 系统的桌面 Mac 的桌面是一个很炫的3D, 背景是一张“星空”图. 2 Dock:  在桌面的下方有一排图标, 叫Dock, 用来快速启动程序, 进入文件夹, 它同时还可以停靠正在运行的程序 ...

  4. Generator函数的语法

    简介 Generator函数是ES6关于异步编程的解决方案.Generator函数能够让函数暂停执行(即交出函数的执行权),简单直白点来理解,Generator函数就是一个状态机,内部封装了多个状态( ...

  5. CCAction详解

    http://blog.csdn.net/bailongvip/article/details/7895370 转载自雨松MOMO程序研究院 上一章我们了解了CCNode的实现原理,这次我跟大家探讨一 ...

  6. UVA 10801 Lift Hopping 最短路

    2种方式直接代码就可以了.注意首次不需要60S的转换 #include <map> #include <set> #include <list> #include ...

  7. MySQL -MMM 学习整理

    一. 规划 1．主机规划 服务器 IP 作用 monitor 10.0.0.10 监控服务器 master-01 10.0.0.5 读写主机01 master-02 10.0.0.6 读写主机02 s ...

  8. 实现如下语法的功能：var a = add(2)(3)(4); //9

    从汤姆大叔的博客里看到了6个基础题目:本篇是第6题 - 实现如下语法的功能:var a = add(2)(3)(4); //9 解题关键:add()函数需要返回一个加法函数,而不是一个普通的值,即定义 ...

  9. Codeforces Round #377 (Div. 2) A. Buy a Shovel【暴力/口袋里面有无限枚 10 元和一枚 r 面值的硬币，问最少可以买多少把价值为 k 的铁铲】

    A. Buy a Shovel time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  10. vue的路由设置小结

    vue的路由设置小结 // 异步路由的编写示例.其中针对component字段进行懒加载及分块处理,提升首屏加载速度的同时,也可以手动控制让某些页面合并到一个单独的js文件中,而不是每个页面都是一个j ...