(三十)Canvas动画
1:Canvas动画原理
快速切换的静态画面
Frames Per Second
人眼 - 24FPS
游戏(屏幕) - 60FPS
2:基本步骤
绘制 - 清空 - 绘制 - 清空 - 绘制 ...
3:控制函数
setInterval
setTimeout
requestAnimationFrame
快速切换的静态画面
Frames Per Second
人眼 - 24FPS
游戏(屏幕) - 60FPS
绘制 - 清空 - 绘制 - 清空 - 绘制 ...
setInterval
setTimeout
requestAnimationFrame
本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。
初识CSS预处理器 18分56秒
本节主要讲解CSS的发展历史、四种布局方式、以及CSS预处理器主要功能,介绍了常见的三种CSS预处理器。
Less初体验 18分09秒
本节主要讲Less的基本使用,从嵌套、混合、变量、函数和引入五个方面介绍了Less的基础用法,并和Sass进行了概念层次的比较,分析Less的优劣势。
Sass初体验 19分31秒
本节主要讲了Sass的基本使用,从嵌套、变量、函数、继承和高阶属性方面介绍了Sass的常用语法,贯穿全篇比较了Sass与Less的共同点和差异。
初识PostCss 19分18秒
本节主要讲PostCss的定位,结合webpack介绍了PostCss主要的几个插件,autoprefixer、postcss-cssnext、postcss-modules、lost、stylelint等。
CSS预处理器与构建工具集成 12分43秒
本节主要学习Webpack如何与Css预处理集成,讲解了Sass、Less和PostCss组合集成等。
Flex弹性盒模型 27分25秒
本节主要学习 Webpack 如何与Css预处理集成,讲解了Sass、Less和PostCss组合集成。
弹性盒模型常见例子 17分48秒
本节主要从三个例子入手,分别是垂直居中、响应式、圣杯,介绍了Flexbox的主要应用场景,并与传统方式对比,感受Flexbox布局带来的便捷开发体验。
CSS3渐变 20分26秒
本节主要学习 Linear Gradients 与 Radial Gradients 的基本概念,介绍两种渐变的常用属性,最后结合了 Linear Gradients 实例介绍CSS3渐变在实际中的部分应用场景。
Grid网格布局(上) 26分59秒
本次主要学习Grid网格布局,包括网格布局的基本概念,浏览器的兼容等。
Grid网格布局(下) 13分21秒
本节课主要学习Grid网格布局的基本概念,介绍Grid Container十四个常用属性以及Grid Item的九个常用属性。
Transform变换 20分28秒
本节主要学习 Transform的基本概念,介绍CSS3坐标系统与透视原理,Transform常用的Rotate(旋转)、Scale(缩放)、Skew(倾斜)、Translate(移动)、Perspective(透视)属性。
Transition过渡(上) 18分52秒
本节主要学习Transition过渡,包括过渡的基本概念,浏览器兼容,过渡属性等。
Transition过渡(下) 13分58秒
本节主要学习Transition相关的数学基础,包括duration、property、delay、timing-function这几个常用属性等。
媒体查询及响应式 20分11秒
本节课主要学习媒体查询的基本概念,讲解了媒体类型、运算符和媒体功能的常用属性,介绍了媒体查询与响应式布局的相关内容。
CSS动画 20分11秒
本节主要讲解CSS两种典型动画各自的特点,重点介绍了CSS帧动画的六个常用属性,结合练习题介绍帧动画的常用场景。
CSS常用动画库简介与JS动画 22分43秒
REM布局原理 16分16秒
本节主要学习从移动端 viewport 切入, 介绍rem的基本概念,从 viewport 与 font-size 两个方面介绍了移动端自适应方案并扩展到 PC 端,最后介绍了 css 新特征 vw 与 vh 方案。
淘宝Rem布局方案 12分26秒
本节主要学习淘宝移动端适配方案的基本原理和使用方法,介绍了实际开发中px到rem的转换方法,字体在Rem布局中的特殊处理等。
CSS Module 16分51秒
本节课从CSS模块树入手,介绍了CSS Module在实际应用中解决了哪些痛点,介绍了AST语法树与常见框架封闭CSS作用域的方式,最后结合css-loader介绍了目前CSS Module的常见用法。
BEM命名规范 13分49秒
本节主要学习BEM命名的基本概念,介绍了Block、Element与Modifier常用的命名规范,BEM命名规范在预处理器语言中的使用。
Web存储技术(上) 23分45秒
本节主要学习Web存储技术,介绍Web存储技术的背景,学习Cookie的类型、Cookie域、Cookie路径等,还讲解了SessionStorage和LocalStorage两种存储方式。
Web存储技术(中) 21分05秒
本节主要学习IndexedDB背景、IndexedDB基本概念、IndexedDB浏览器兼容等。
Web存储技术(下) 14分33秒
本节课主要讲了如何关闭IndexedDB数据库连接,删除IndexedDB数据库,WebSQL基本概念,还有课后练习等。
初识WebWorker 22分20秒
本节主要讲了浏览器存储技术的历史,介绍了cookie、sessionStorage、localStorage、IndexedDb、WebSQL的技术背景和技术特征等。
WebWorker进阶 17分50秒
本节主要介绍WebWorker特殊应用场景,扩展了WebWorker的能力,为跨页面通信提供了另外一种思路。
SSE与WebSocket 18分52秒
本节主要从广义上的网页长连接入手,介绍了WebSocket与SSE的主要特点,重点介绍了SSE的使用方法,最后结合课后练习展示了SSE与WebSocket最典型的应用场景。
Canvas简介与基础用法 17分21秒
本节主要介绍Canvas元素基本概念和坐标系统,从线段、三角形、圆和贝塞尔曲线四个示例介绍了Canvas元素的基本绘制方法。
丰富Canvas应用 31分35秒
本节主要学习Canvas填充、文本以及图片等多媒体样式应用,结合状态保存与恢复介绍了Canvas如何绘制多彩的内容。
Canvas变换 18分02秒
本节主要学习Canvas变换相关内容,从Tramsform、Shadow和Clip三个方面拓展了Canvas的绘图能力。
Canvas动画 16分38秒
本节主要学习Canvas动画效果的基本原理,从线性、变速、函数及环形运动介绍了Canvas常用的运动函数。
HTML地理坐标 14分09秒
本节主要介绍浏览器地理坐标的获取基准,结合具体百度地图展示了地理坐标从获取到展示的过程。
离线地图 11分03秒
本节课介绍了瓦片地图原理(标准),介绍了比较流行地图离线插件Leaflet的基本使用。
Audio 11分22秒
本节主要介绍了Audio元素的基本使用方法,介绍了Audio对象的属性和方法。
Video 12分24秒
本节主要介绍了Video元素的基本使用方法,介绍了Video对象的属性和方法,最后结合流媒体格式介绍了Video.js播放器插件。
构造函数 16分29秒
本节主要从JavaScript创建对象入手,从基本用法、返回值及与普通函数的对比介绍了构造函数的基本用法,并抛出构造函数的执行过程。
JavaScript原型链 22分01秒
本节主要介绍了JavaScript原型链,从对象属性入手介绍了__proto__与prototype,讲解了原型链的追溯方式,最后结合练习题引入原型链继承概念。
JavaScript常用继承方式(上) 17分24秒
本节主要学习JavaScript常用的几种继承方式,包括原型链继承、构造函数继承、组合继承、原型式继承。
JavaScript常用继承方式(下) 14分32秒
本节主要讲JavaScript的几种常用继承方式,包括寄生式继承、寄生组合继承与继承多个父类。
JavaScript中的this 23分24秒
本节主要从严格模式与非严格模式两个角度出发,介绍了JavaScript中this在全局环境和函数体内部的指向。
JavaScript调用栈 17分55秒
本节主要从JavaScript单线程模型出发,介绍了浏览器环境下JavaScript线程的执行过程,结合具体例子介绍了宏任务与微任务结合的执行过程。
JavaScript函数式编程(上) 23分22秒
本节主要学习JavaScript函数式编程,包括函数式编程的基本概念,函数和纯函数的介绍,函数柯里化等。
JavaScript函数式编程(下) 20分25秒
本节主要从函数式编程的基本概念出发,介绍了函数式编程的特点,最后结合实例介绍了函数式编程中核心概念
JavaScript闭包 19分21秒
本节主要从典型的闭包出发,介绍了闭包的基本概念、特点和应用场景,最后结合具体例子介绍了闭包的主要用途和常见的误区。
JavaScript正则表达式 21分04秒
本节主要学习Javascript中正则表达式的基本概念,介绍了常用的特殊符号,最后结合实例介绍了正则表达式的常用方法。
JavaScript面向对象编程 22分46秒
本节主要介绍了Javascript中正则表达式的基本概念,介绍了常用的特殊符号,最后结合实例介绍了正则表达式的常用方法。
JavaScript自定义事件 14分22秒
本节主要介绍了 Javascript 中事件的基本概念及特点,通过两个例子介绍了自定义事件的使用方法,最后结合仿照JQ实现一个事件绑定对象。
JavaScript实现Ajax 18分49秒
本节主要介绍了Javascript中XMLHttpRequest对象的基本属性和方法,从实例化、初始化、发送和接受四个阶段完成了Ajax网络请求核心内容封装。
JavaScript排序算法 16分07秒
本节课介绍了常用四种排序算法的基本原理和代码实现思路,并使用JavaScript代码实现了四种排序函数。
JavaScript模块化开发 20分00秒
本节主要从JavaScript发展历史讲起,介绍了模块化开发的发展历程,并结合实例介绍了CommonJS、AMD、CMD三种规范的基本用法。
ES6 - 变量扩展与解构 23分41秒
本节主要从ES6的发展历史入手,简要介绍了ES6的主要优势,重点介绍了ES6中变量的扩展与解构两个常用概念。
ES6 - 字符串与正则的扩展 26分56秒
本节主要介绍了ES6关于字符串与正则的扩展, 并介绍了字符串的新增方法。
ES6 - 数组的扩展 23分40秒
本节主要介绍了ES6关于数组的扩展, 重点在于ES6中数组方法并不会改变原数组。
ES6 - 数值的扩展 09分39秒
本节主要介绍了ES6关于数数值的扩展。
ES6 - 对象的扩展 25分00秒
本节主要介绍了ES6关于对象的扩展和对象的新增方法。
ES6 - 函数的扩展 25分06秒
本节主要介绍了ES6关于函数的扩展,重点内容包括函数参数的默认值与箭头函数。
ES6新特征 - Symbol 18分28秒
本节主要介绍了ES6新特征中Symbol的基本用法与内置Symbol。
ES6新特征 - Set与Map 28分37秒
本节主要介绍了ES6新特征中Map与Set的基本概念、属性方法及遍历方法,并简要介绍了WeakSet与WeakMap。
ES6新特征 - Proxy 21分12秒
本节主要介绍了ES6新特征中Proxy的基本概念与常见的代理设置,重点关注Proxy代理内部的this指向Proxy本身。
ES6新特征 - Reflect 19分01秒
本节课介绍了ES6新特征中Reflect的基本概念与常见的静态方法。
ES6新特征 - Promise 24分44秒
本节主要介绍了ES6新特征中Promise的基本概念与常用属性和方法,重点在于Promise不同状态与链式调用。
ES6新特征 - Iterator迭代器 15分44秒
本节主要介绍了ES6新特征中Iterator的基本概念,简要介绍了Iterator的主要应用场景。
ES6新特征 - Generator函数 18分48秒
本节主要介绍了ES6新特征中Generator的基本概念、执行过程与常用方法,之后结合实例介绍了Generator的主要应用场景
ES6新特征 - Async 19分04秒
本节主要介绍了ES6新特征中Async的基本概念、语法规则与注意事项,重点理解Async自动化执行包装器。
ES6新特征 - Class 19分49秒
本节主要介绍了ES6新特征中Class的基本用法与属性方法,介绍了Class继承的基本用法。
ES6新特征 - Module 12分21秒
本节主要介绍了ES6新特征中Module的基本用法,重点在于理解import与export的复合调用,最后介绍了import()动态加载。
已签到2天,连续签到7天即可领取7天全站VIP
金币可以用来做什么?
恭喜!签到成功,获得+2积分