《HTML5 CANVAS基础教程》读书笔记
一、HTML5简介
1.HTML5新特性
1)结构元素:section,header,hgroup,footer,nav,article,aside,
2)内容元素:figure,figcaption,mark,time
3) 表单:浏览器端验证、输入类型、输入属性
4)媒体元素:audio元素、video元素、canvas元素
2.其它和H5相关的新技术
1)CSS3
2)web fonts
3) Geolocation API
4) SVG
5) web storage
6) web workers
7) WebSocket
三、Canvas基础知识
1.常用方法:
1)fillRecct():绘制方块
2)strokeRect():绘制方块(边框)
3)绘制线条:beginPath、moveTo、lineTo、closePath、stroke
4)fill():填充(与stroke对应)
5)arc(): 画圆
6)fillStyle()【strokeStyle()】:填充颜色
7) lineWidth:线宽
8)fillText【strokeText】:绘制文本(font属性用来设置字号和字体)
9)clearRect():清除
2.小技巧:
1)重设画布的长宽,可以清除画布上的所有内容(包括样式和颜色),据说这种效率更高哦~
2)画布全屏显示(参考P69页)
3)画布大小根据浏览器变动而变动(参考P71页)
四、canvas高级功能
1.保存和恢复绘图状态:context.save()、restore(),2个方法对状态的储存方式,是一个堆栈。
2.平移:context.translate(),平移的是坐标原点,而不是绘制对象
3.缩放:context.scale(),缩放也是对代码之后的对象起效果,而且对上面的原点坐标的平移也同样有效
4.旋转:context.rotate(),旋转是围绕着原点坐标转的,所以经常和translate方法一起使用
5.变换矩阵:transform()、setTransform,前者是在原来矩阵上应用一个相乘的效果,后者是直接设定对应的值。
6.透明:全局阿尔法值context.globalAlpha = 0.5
7.合成操作:对源和目标,两者的组合方式有多种选择(详见P87),有可能可以实现类似擦除、滤镜的效果。
8.阴影:shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY
9.渐变:线性渐变(createLInearGradient)、放射渐变(createRadialGradient)
10.贝赛尔曲线:二次(quadraticCurveTo)、三次(bezierCurveTo)方法
11.将画布导出为图像:toDataURL(),可以通过生成URL直接在浏览器中查看
五、处理图像和视频
1.加载方法:context.drawImage(image,x,y);
2.调整大小的用法:drawImage(image,x,y,width,height);
3.加上裁剪的用法:drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh),具体用法参考P107
4.绘制的图像可以带上上一章学的各种特效:阴影、平移、变形等
5.访问像素值:context.getImageData(),计算得到像素值RGB数值的公式(P115)
6.从零绘制图像:createImageData(),putImageData(imageData,0,0)
7.利用ImageData的方法,可以实现马赛克效果、反转颜色、灰度、像素化的效果
8.处理视频:通过设置定时器和视频的帧数同步,取出视频的每一帧来应用到画布上,还可以加特效
六、制作动画
1.创建动画循环:更新对象、清除对象、绘制对象
2.使用函数来创建对象,来记忆绘制对象的形状
3.运动和改变方向,要使用三角函数、弧度的算法来实现
4.反弹是通过计算画布大小的方式实现
七、实现高级动画
1.准备工作:高中物理常识+牛顿运动定律(F = ma)
2.加速度实现:速度 += 加速度
3.摩擦力实现(模拟):速度 *= 摩擦系数
4.检测碰撞:正方形和小球有不同的计算公式
5.动量守恒定律,使得碰撞效果更逼真(不要深究公式)
八、太空保龄球游戏
1.使用HTML元素设计UI界面(要位于画布的前面,比较方便显示),使用CSS将UI界面移动到canvas元素上方
九、躲避小行星游戏
1.使用键盘输入控制游戏
2.利用save方法来保存火箭喷射火焰效果
3.假造横向卷轴的效果
4.给游戏增加难度(不断优化游戏)
5.给游戏添加声音
十、未来的Canvas
1.canvas与SVG区别:一个是位图、一个是矢量图,SVG在编辑和绘制形状方面比较好,而canvas在编辑像素级的东西(处理图像和视频)比较好。
2.canvas与flash:选择一款像FLASH那样好用的编辑器,canvas有性能问题,还好有几种解决方法(P236)
3.三维图形:canvas使用WebGL技术来建立三维图形。三维图形对专业要求比较高,可以利用框架来降低学习门槛
4.WebSocket技术:实现多人通信、游戏
转载于:https://www.cnblogs.com/xujanus/p/5020031.html
《HTML5 CANVAS基础教程》读书笔记相关推荐
- 读书笔记 | 墨菲定律
1. 有些事,你现在不做,永远也不会去做. 2. 能轻易实现的梦想都不叫梦想. 3.所有的事都会比你预计的时间长.(做事要有耐心,要经得起前期的枯燥.) 4. 当我们的才华还撑不起梦想时,更要耐下心来 ...
- 读书笔记 | 墨菲定律(一)
1. 有些事,你现在不做,永远也不会去做. 2. 能轻易实现的梦想都不叫梦想. 3.所有的事都会比你预计的时间长.(做事要有耐心,要经得起前期的枯燥.) 4. 当我们的才华还撑不起梦想时,更要耐下心来 ...
- 洛克菲勒的38封信pdf下载_《洛克菲勒写给孩子的38封信》读书笔记
<洛克菲勒写给孩子的38封信>读书笔记 洛克菲勒写给孩子的38封信 第1封信:起点不决定终点 人人生而平等,但这种平等是权利与法律意义上的平等,与经济和文化优势无关 第2封信:运气靠策划 ...
- 股神大家了解多少?深度剖析股神巴菲特
股神巴菲特是金融界里的传奇,大家是否都对股神巴菲特感兴趣呢?大家对股神了解多少?小编最近在QR社区发现了<阿尔法狗与巴菲特>,里面记载了许多股神巴菲特的人生经历,今天小编简单说一说关于股神 ...
- 2014巴菲特股东大会及巴菲特创业分享
沃伦·巴菲特,这位传奇人物.在美国,巴菲特被称为"先知".在中国,他更多的被喻为"股神",巴菲特在11岁时第一次购买股票以来,白手起家缔造了一个千亿规模的 ...
- 《成为沃伦·巴菲特》笔记与感想
本文首发于微信公众帐号: 一界码农(The_hard_the_luckier) 无需授权即可转载: 甚至无需保留以上版权声明-- 沃伦·巴菲特传记的纪录片 http://www.bilibili.co ...
- 读书笔记002:托尼.巴赞之快速阅读
读书笔记002:托尼.巴赞之快速阅读 托尼.巴赞是放射性思维与思维导图的提倡者.读完他的<快速阅读>之后,我们就可以可以快速提高阅读速度,保持并改善理解嗯嗯管理,通过增进了解眼睛和大脑功能 ...
- 读书笔记001:托尼.巴赞之开动大脑
读书笔记001:托尼.巴赞之开动大脑 托尼.巴赞是放射性思维与思维导图的提倡者.读完他的<开动大脑>之后,我们就可以对我们的大脑有更多的了解:大脑可以进行比我们预期多得多的工作:我们可以最 ...
- 读书笔记003:托尼.巴赞之思维导图
读书笔记003:托尼.巴赞之思维导图 托尼.巴赞的<思维导图>一书,详细的介绍了思维发展的新概念--放射性思维:如何利用思维导图实施你的放射性思维,实现你的创造性思维,从而给出一种深刻的智 ...
- 产品读书《滚雪球:巴菲特和他的财富人生》
作者简介 艾丽斯.施罗德,曾经担任世界知名投行摩根士丹利的董事总经理,因为撰写研究报告与巴菲特相识.业务上的往来使得施罗德有更多的机会与巴菲特亲密接触,她不仅是巴菲特别的忘年交,她也是第一个向巴菲特建 ...
最新文章
- 周记 2016.4.5
- Docker 使用教程
- 几种Linux段错误调试方法
- 新浪微博登录密码加密函数 wsse加密算法说明
- mtk6589显示子系统笔记(一)
- 【iOS 开发】Objective - C 面向对象 - 方法 | 成员变量 | 隐藏封装 | KVC | KVO | 初始化 | 多态
- 服务器多难管理怎么办?给你一个服务器批量管理工具
- java中 indexOf() 与lastIndexOf() 用法详解
- Lucene分类统计示例
- java 的 CopyOnWriteArrayList类
- WebClient 上传文件
- pytorch显卡内存随训练过程而增加_PyTorch重大更新:将支持自动混合精度训练!...
- 《人工智能如何走向新阶段》大家谈(跟帖,续)
- id 和 class 选择器
- js向html文档添加空格,javascript – 如何在HTML中的行之间找到空格?
- php 制作网站地图,网站地图怎么做,制作网站地图的三种实用方法
- 魔兽世界燃烧的远征最新服务器,进驻推荐服务器,享受《燃烧的远征》
- Layui 重载后表格内容重复 更换提交方式已解决
- Python和Matlab生成图片到visio的矢量图
- 华为近场通讯nfc在哪里打开_华为手机nfc感应区在手机哪个位置
热门文章
- Kubernetes实战实现 Guestbook 留言板-简易版详解
- jquery给标签添加属性禁止编辑属性
- Web基础之Redis
- 接力大数据风口的数据中台,你一定要知道
- MVC和MVVC的一些区别
- 网页设计案例 马拉松宣传网页设计
- 电脑右击此电脑,Windows找不到文件’C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Administrative Tools\Compu
- 常见分布式文件存储介绍、选型比较、架构设计
- oled屏HBM功能开启关闭
- Android:scaleType用法及参数含义