js动画杂记
在画布上做动画
方法有
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动画杂记的更多相关文章
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- css与 js动画 优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...
- [学习笔记]js动画实现方法,作用域,闭包
一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...
- 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 首 ...
- js动画(四)
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
- css动画特效与js动画特效(一)------2017-03-24
1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...
随机推荐
- JSP标签的用法
JSP动作标签: 通过动作标签,程序员可以在JSP页面中把页面的显示功能部分 封装起来,是整个页面更简洁和易于维护 <jsp:useBean> 装载一个将在JSP页面中使用的JavaBea ...
- python中xml解析
import xml.dom.minidom input_xml_string = '''<root><a>hello</a></root>'''#打开 ...
- 移动像素的px ,dp/pt,dpr的关系
一:基础知识 px:逻辑像素,浏览器使用的抽象单位 dp,pt:设备无关像素 也叫物理像素 dpr:devicePixelRatio 设备像素缩放比 计算公式:1px=(dpr)^2*dp; ipho ...
- Android 连接服务器,并进行相关操作
1.连接服务器 (1)直接使用WINDOWS自带的远程桌面连接 win+R调出DOS操作窗口,输入mstsc.exe 点击确定,进入如下界面: 点击连接,输入用户名和密码登录,电脑会进入服务器界面.
- Windows 搭建ASP.NET Boilerplate项目开发环境
1.本机安装对应版本的.net core 2.安装vs2017或以上版本 3.从ABP官网下载模板,我下载的是前后端分离的Angular模板 4.用vs2017分别打开前后端,还原Nuget包 5.前 ...
- CDQZ Day1
#include<cassert> #include<cstdio> #include<vector> using namespace std; ,maxt=,ma ...
- P4578 [FJOI2018]所罗门王的宝藏
传送门 考虑一个位置答案传递性,如果某个位置的红宝石转动确定了,那么会引起连锁反应: 如图,绿色的转动确定了,那么那两个蓝色的转动也确定了 自己手玩一下,发现如果有解那么随便找一个开始然后一路玩下去最 ...
- HDU - 4699 对顶栈
Get到了全新O(1)替代部分伸展树功能的姿势 左栈stk1维护当前信息,右栈stk2维护历史删除信息 题目求的是严格的前缀和(且小于当前指针)那就每次左栈新增时再更新前缀和信息就好 即使把题面换成最 ...
- 【研究】Struts2-052漏洞
漏洞描述: CVE-2017-9805 2017年9月5日,Apache Struts官方发布最新的安全公告称,Apache Struts 2.5.x的REST插件存在远程代码执行高危漏洞,漏洞编号为 ...
- Python BeautifulSoup库的用法
BeautifulSoup是一个可以从HTML或者XML文件中提取数据的Python库,它通过解析器把文档解析为利于人们理解的文档导航模式,有利于查找和修改文档. BeautifulSoup3目前已经 ...