在画布上做动画

方法有

setIntervel(function(){},time);

setTimeout(function(){},time);

新方法

window.requestAnimationFrame(function(){});

动画一般是执行同一个绘画函数多遍(其中每一遍执行会有一些参数不同 代表透明度的,位置的,大小的等等的参数)

这意味着要实现函数的重复执行

setInterval本身就是每隔time执行一次function,可以直接用了

而setTimeout是过了time后执行一次function,也就是只执行一次

而window.requestAnimation是现在的新方法,我目前不是很了解它的意思,但是同样只执行一次

之前对于如何实现重复绘画,我百思不得其解,

现在想来真是太傻了...

setTimeout 和 window.requestAnimation是一样的,

直接调用函数,然后在函数末尾调用setTimeout 或window.requestAnimation

那么问题又来了,重复动画如何取消呢?

使用方法前先取个名字

var ID = setInterval();

要结束就用下面这个

clearInerval(ID);

setTimeout 和 window.requestAnimation 也同理,它们的取消方法如下:

clearTimeout(ID);

cancelAnimationFrame(ID);

reverse()和save()很重要
使用方法就是所有绘画开始之前先save()
每绘画完一帧就执行一次
ctx.reverse();save()

如果改变了画布参数,画下一个图形时就要进行一次ctx.reverse();save(),或者手动把参数改回来

js动画杂记的更多相关文章

  1. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  2. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  3. CSS VS JS动画,哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  4. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  5. css与 js动画 优缺点比较

    我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...

  6. [学习笔记]js动画实现方法,作用域,闭包

    一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...

  7. css3动画与js动画的一些理解

    http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...

  8. js动画(四)

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

  9. css动画特效与js动画特效(一)------2017-03-24

    1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...

随机推荐

  1. JSP标签的用法

    JSP动作标签: 通过动作标签,程序员可以在JSP页面中把页面的显示功能部分 封装起来,是整个页面更简洁和易于维护 <jsp:useBean> 装载一个将在JSP页面中使用的JavaBea ...

  2. python中xml解析

    import xml.dom.minidom input_xml_string = '''<root><a>hello</a></root>'''#打开 ...

  3. 移动像素的px ,dp/pt,dpr的关系

    一:基础知识 px:逻辑像素,浏览器使用的抽象单位 dp,pt:设备无关像素 也叫物理像素 dpr:devicePixelRatio 设备像素缩放比 计算公式:1px=(dpr)^2*dp; ipho ...

  4. Android 连接服务器,并进行相关操作

    1.连接服务器 (1)直接使用WINDOWS自带的远程桌面连接 win+R调出DOS操作窗口,输入mstsc.exe 点击确定,进入如下界面: 点击连接,输入用户名和密码登录,电脑会进入服务器界面.

  5. Windows 搭建ASP.NET Boilerplate项目开发环境

    1.本机安装对应版本的.net core 2.安装vs2017或以上版本 3.从ABP官网下载模板,我下载的是前后端分离的Angular模板 4.用vs2017分别打开前后端,还原Nuget包 5.前 ...

  6. CDQZ Day1

    #include<cassert> #include<cstdio> #include<vector> using namespace std; ,maxt=,ma ...

  7. P4578 [FJOI2018]所罗门王的宝藏

    传送门 考虑一个位置答案传递性,如果某个位置的红宝石转动确定了,那么会引起连锁反应: 如图,绿色的转动确定了,那么那两个蓝色的转动也确定了 自己手玩一下,发现如果有解那么随便找一个开始然后一路玩下去最 ...

  8. HDU - 4699 对顶栈

    Get到了全新O(1)替代部分伸展树功能的姿势 左栈stk1维护当前信息,右栈stk2维护历史删除信息 题目求的是严格的前缀和(且小于当前指针)那就每次左栈新增时再更新前缀和信息就好 即使把题面换成最 ...

  9. 【研究】Struts2-052漏洞

    漏洞描述: CVE-2017-9805 2017年9月5日,Apache Struts官方发布最新的安全公告称,Apache Struts 2.5.x的REST插件存在远程代码执行高危漏洞,漏洞编号为 ...

  10. Python BeautifulSoup库的用法

    BeautifulSoup是一个可以从HTML或者XML文件中提取数据的Python库,它通过解析器把文档解析为利于人们理解的文档导航模式,有利于查找和修改文档. BeautifulSoup3目前已经 ...