HTML5 Canvas 用requestAnimation取代setInterval
<!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的更多相关文章
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- html5 canvas常用api总结(一)
1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...
- HTML5 Canvas彩色小球碰撞运动特效
脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效. 效果展示 http://hovertree.com/texiao/html5/39/ ...
- html5 canvas用动画的形式装载图像
本示例使用HTML5 canvas,简单的编写了装载图片效果, 请使用支持HTML5的浏览器预览效果: 下图为以逐渐横向栅格的效果图 html部分: <!DOCTYPE html> < ...
- html5 canvas绘画时钟
本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- HTML5 Canvas绘文本动画（使用CSS自定义字体）
一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...
- 使用 HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
- Html5 Canvas动画旋转的小方块；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
随机推荐
- 解决jquery与zepto等其它库冲突兼容的问题
解决jquery与zepto等其它库冲突兼容的问题;(function ($) { }) (jQuery); ;(function ($) { }) (Zepto); 在Bootstrap ...
- week01-绪论报告
一.作业题目: 仿照三元组或复数的抽象数据类型写出有理数抽象数据类型的描述 (有理数是其分子.分母均为整数且分母不为零的分数). 有理数基本运算: 构造有理数T,元素e1,e2分别被赋以分子.分母值 ...
- 配置wpa_supplicant调试wifi linux下命令行连接wifi
调试wpa_supplicant先读一下对应的README.txt文件.根据README.txt修改编译配置. wpa_supplicant需要打开以下开关进行编译CONFIG_DRIVER_NL80 ...
- 一篇好文档，请Thymeleaf Layout Dialect
Thymeleaf Layout Dialect https://ultraq.github.io/thymeleaf-layout-dialect/ This will introduce the ...
- 如何将离线的PIP安装包快速安装好
先将已安装的组件通过pip freeze require.txt导出. 将require里需要的安装包放到一个独立目录下. 然后运行命令: pip install --no-index --find- ...
- [scrapy] 爬了第一页就停止 filtered off site request to
我碰到这个问题的原因是 allowed_domains 写错了 至于还有没有别的原因就不知道了
- (转载)管道命令和xargs的区别(经典解释)
一直弄不懂,管道不就是把前一个命令的结果作为参数给下一个命令吗,那在 | 后面加不加xargs有什么区别 NewUserFF 写道:懒蜗牛Gentoo 写道:管道是实现“将前面的标准输出作为后面的标准 ...
- 用了GradientDrawable后，当点击控件时，控件大小发生变化
android新手:发现一个很奇怪的问题,用了GradientDrawable后,当点击控件时,程序自动使我的一些控件大小保持一致,为什么呢,我就是不想它们保持一致啊 改了好久好久:GradientD ...
- Codeforces Round #267 (Div. 2) B. Fedor and New Game【位运算/给你m+1个数让你判断所给数的二进制形式与第m+1个数不相同的位数是不是小于等于k，是的话就累计起来】
After you had helped George and Alex to move in the dorm, they went to help their friend Fedor play ...
- Codeforces 626F Group Projects （DP）
题目链接 8VC Venture Cup 2016 - Elimination Round 题意 把$n$个物品分成若干组,每个组的代价为组内价值的极差,求所有组的代价之和不超过$k$的方案数. ...