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 ...
随机推荐
- Audio Unit 介绍
关于 Audio Unit iOS 提供了音频处理插件,支持混音,声音均衡,格式转化,以及用于录音,回放,离线渲染,实时对话的输入输出.可以动态载入和使用这些强大而灵活的插件,在 iOS 应用中这些插 ...
- BZOJ[Sdoi2014]数表 莫比乌斯反演
[Sdoi2014]数表 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 2383 Solved: 1229[Submit][Status][Disc ...
- jquery 的ajax
一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该 ...
- s19文件格式详解
1.概述 为了在不同的计算机平台之间传输程序代码和数据,摩托罗拉将程序和数据文件以一种可打印的格式(ASCII格式)编码成s格式文件.s格式文件是Freescale推荐使用的标准文件传送格式.编译完成 ...
- 阿里云Centos 7 FTP(vsftp)服务安装及配置
#检查vsftpd是否安装 rpm -qa | grep vsftpd #检查vsftpd版本并安装 yum list vsftpd yum install vsftpd #设置开机启动 system ...
- poj 3744 Scout YYF 1 (概率DP+矩阵快速幂)
F - Scout YYF I Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Sub ...
- webservice soapheader验证方法
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- C++ MFC std::string转为 std::wstring
std::string转为 std::wstring std::wstring UTF8_To_UTF16(const std::string& source) { unsigned long ...
- shiro配置参考(二)可以和mybatis的配置放在一个文件中(不建议这样,可以拆分开来,注意相关配置即可)
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Fiddler抓包9-保存会话(save)【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/fiddler/ 前言 为什么要保存会话呢?举个很简单的场景,你在上海测试某个功能接口的 ...