<!DOCTYPE HTML>

 <html lang="zh-CN">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>test</title>

     </head>

 <body>

 <Canvas id="canvas1" width="230" height="600" style="background-color:black">

 你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

 </canvas><br/>

 帧数：<input id="txt1" type="text" value="25"/><br/>

 每次移动距离：<input type="text" id="txt2" value="10"/>px<br/>

 <input type="button" value="开始"  onclick="move_box()" />

 <input type="button" value="暂停" onclick="stop()" />

 <script type="text/javascript">

 //定时器

 var interval=null;

 //停止动画

 function stop(){

     clearInterval(interval);

 }

 //====================

 //基本动画

 //===================

 function move_box(){

     //停止动画

     stop();

     //移动速度

     var delta=parseInt(document.getElementById('txt2').value);

     //每秒绘制多少次

     var fps=parseInt(document.getElementById('txt1').value);

     //画布对象

     var canvas=document.getElementById("canvas1")

     //获取上下文对象

     var ctx = canvas.getContext("2d");

     //设置颜色

     ctx.fillStyle="red";

     //方块的初始位置

     var x=100;var y=30;

     //方块的长度和宽度

     var w=30;var h=30;

     //开始动画

     interval = setInterval(function(){

         //改变 y 坐标

         y=y+delta;

         //上边缘检测

         if(y<0){

         y=0;

         delta=-delta;

         } 

         //下边缘检测

         if((y+h)>canvas.getAttribute("height")){

         y=canvas.getAttribute("height")-h;

         delta=-delta;

         }

         //清空画布

         ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));

         //保存状态

         ctx.save();

         //移动坐标

         ctx.translate(x,y);

         //重新绘制

         ctx.fillRect(0,0,w,h);

         //恢复状态

         ctx.restore();

         },1000/fps);

 }

 </script>

 </body>

 </html>

Canvas帧数和步长实例的更多相关文章

  1. Unity3D FPS帧数修改

    修改Unity的FPS FPS是游戏运行的帧数,本文讲解如何修改Unity引擎的FPS. 步骤 1.在 Edit/Project Settings/Quality  质量设置里把帧数设定关闭,关闭之后 ...

  2. js获取 gif 的帧数

    使用 javascript 获取 GIF 图的帧数,如果帧数过大,则不让传到服务器 这里是使用一个插件: github地址为: https://github.com/buzzfeed/libgif-j ...

  3. C#获取gif帧数

    C#获取gif帧数 /// <summary> /// 获取gif帧数 /// </summary> /// <param name="gifBytes&quo ...

  4. 转：显示技术中的帧、帧数、帧率、 FPS

    在视频领域,电影.电视.数字视频等可视为随时间连续变换的许多张画面,而“帧( Frame)”是指每一张画面.而我们日常口语习惯或者说不严谨的交流中,通常对于帧数( Frames)与帧率( Frame ...

  5. [Unity3D]查看与设置游戏帧数FPS

    原地址:http://blog.sina.com.cn/s/blog_5b6cb9500101bta4.html 关于FPS,在PC端来说,游戏帧数跑得越高越好,FPS跑得越高游戏就越流畅,当然太高也 ...

  6. [译]GLUT教程 - 每秒帧数

    Lighthouse3d.com >> GLUT Tutorial >> Extras >> Frames per Second 你的程序实际上跑得多快? 有时我们 ...

  7. 在canvas上面绘制图片--drawImage实例

    在canvas上面绘制图片--drawImage实例 关键点: 1.图片居中 2.其它 <!DOCTYPE html> <html lang="zh-cn"> ...

  8. Hadoop作业性能指标及參数调优实例 （三）Hadoop作业性能參数调优方法

    作者: Shu, Alison Hadoop作业性能调优的两种场景: 一.用户观察到作业性能差,主动寻求帮助. (一)eBayEagle作业性能分析器 1. Hadoop作业性能异常指标 2. Had ...

  9. Hadoop作业性能指标及參数调优实例 （二）Hadoop作业性能调优7个建议

    作者:Shu, Alison Hadoop作业性能调优的两种场景: 一.用户观察到作业性能差,主动寻求帮助. (一)eBayEagle作业性能分析器 1. Hadoop作业性能异常指标 2. Hado ...

随机推荐

  1. OpenGL实现3D自由变形

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...

  2. 层序遍历二叉树 完整层序重建二叉树 python

    给定一个二叉树的完整的层次遍历序列(包含所有节点,包括空节点),利用这个序列生成一颗二叉树. 我们首先来看怎样对一颗二叉树进行层序遍历,下图所示的二叉树层次遍历的结果为[a,b,c,d,e],在这个过 ...

  3. CF 382C

    http://codeforces.com/problemset/problem/382/C 读完题立刻知道怎么做,然后分类讨论到吐血,写挂了,巨蠢 #include <iostream> ...

  4. 【剑指offer】链表中倒数第k个节点，C++实现（链表）

    1.题目 输入一个链表,输出该链表中倒数第k个结点.链表的尾节点是倒数第一个节点. struct ListNode { int val; struct ListNode *next; } 2.思路   ...

  5. python中利用类创建的对象来保存信息

    在类创建的对象中,一般都是以字典的方式来保存信息 class Student: def __init__(self, name, age, score): self.name = name self. ...

  6. Percona Xtrabackup 安装

    1.安装Percona Xtrabackup YUM Repository --安装repository [root@manager ~]# yum install https://www.perco ...

  7. 使用python处理selenium中的xpath定位元素的模糊匹配问题

    # 用contains,寻找页面中style属性值包含有sp.gif这个关键字的所有div元素,其中@后面可以跟该元素任意的属性名. self.driver.find_element_by_xpath ...

  8. C#/.NET 读取或修改文件的创建时间和修改时间

    手工在博客中添加 Front Matter 文件头可是个相当费事儿的做法,这种事情就应该自动完成. .NET 中提供了非常方便的修改文件创建时间的方法,使用这种方法,能够帮助自动完成一部分文件头的编写 ...

  9. 让控制台支持 ANSI 转义序列，输出下划线、修改颜色或其他控制

    各种操作系统的控制台都支持 ANSI 转义序列(ANSI Escape Code).使用转义序列,可以对控制台进行很多额外的定制,例如修改颜色.修改标题栏,将文字添加下划线等. 当然,.NET 已经帮 ...

  10. 在linux安装redis单机和集群后，如何在windows上使用redis客户端或者java代码访问错误的原因很简单，就是没有连接上redis服务，由于redis采用的安全策略，默认会只准许本地访问。需要通过简单配置，完成允许外网访问。

    这几天在学习在linux上搭建服务器的工作,可谓历经艰辛.可喜最后收获也不少. 这次是在linux上搭建redis服务器后从windows上缺无法访问,连接不上. 仔细回忆以前搭建nginx和ftp的 ...