<HeadFirst_HTML5> O'REILLY_Chap.7_画布
来源:互联网 发布:诺维斯基体测数据 编辑:程序博客网 时间:2024/05/21 02:48
<HeadFirst_HTML5> O’REILLY_Chap.7_画布
本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.
FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.
FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.
FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.
感谢<HeadFirst_HTML5>作者 Eric Freeman & Elisabeth Robson
感谢<HeadFirst_HTML5>翻译 林琪 张伶
正文
原文
BULLTE POINTS(要点):
画布是一个元素, 可以放在页面上来创建一个绘制空间.
除非你指定, 否则画布没有默认的样式或内容(所以在画布上绘制内容或用CSS增加边框之前, 在页面上是看不见画布的).
页面上可以有多个画布. 当然, 需要为每个画布提供一个唯一的id, 以便使用JavaScript分别访问.
要指定画布元素的大小, 可以使用元素的
width
和height
属性.画布上的所有内容都使用JavaScript绘制.
要在画布上绘制, 首选需要创建一个上下文. 目前, 2D上下文是唯一的选择, 不过将来可能还会有其他上下文类型.
要在画布上绘制, 需要有一个上下文, 因为上下文提供了一个特定的接口(例如:2D或3D). 你可以从多种接口中选择来完成画布上的绘制
使用上下文属性和方法来访问画布.
要在画布中绘制一个矩形, 可以使用
context.fillRect
方法, 这个方法会创建一个矩形, 并填充指定的颜色.要创建一个矩形轮廓, 可以使用
strokeRect
而不是fillRect
.使用
fillStyle
和stokeStyle
可以改变默认的填充和笔划颜色, 默认是黑色.可以使用CSS中同样的格式指定颜色(例如: “black”, “#000000”, “rgb(0, 0, 0)” ), 记住要在
fillStyle
值两边加上引号.并没有一个
fillCircle
方法. 要在画布上绘制一个圆, 需要绘制一个弧.要创建任意的形状或弧, 首先需要创建一个路径.
路径是一个不可见的线或形状, 它定义了画布上的一条线或区域. 用笔划描出路径或填充路径之前, 路径是看不到.
要创建一个三角形, 可以使用
beginPath
创建一个路径. 然后使用moveTo
和lineTo
来绘制路径. 使用closePath
可以连接路径上的两个点.要绘制一个圆, 可以创建一个360°的弧. 起始角为0, 终止角为360°.
画布中使用弧度来指定角, 而不是使用度, 所以需要从度转化为弧度来指定起始角和终止角.
360度 = 2Pi 弧度.
要在画布上绘制文本, 可以使用
fillText
方法.在画布中绘制文本时, 需要使用上下文属性指定位置, 样式和其他属性
设置一个上下文属性时, 它会应用到后面的所有绘制操作, 直到你再次改变这个属性. 例如, 改变
fillStyle
会影响设置fillStyle
之后绘制的所有形状和文本的颜色.可以用
drawImage
方法向画布增加图像.要增加一个图像, 首先需要创建一个图像对象, 并确保它完全加载.
在画布上绘制就像在图形程序中完成”位图”绘制.
- <HeadFirst_HTML5> O'REILLY_Chap.7_画布
- <HeadFirst_HTML5> O'REILLY_Chap.1_认识HTML5
- <HeadFirst_HTML5> O'REILLY_Chap.8_视频
- <HeadFirst_HTML5> O'REILLY_Chap.3_事件_处理程序
- <HeadFirst_HTML5> O'REILLY_Chap.5_实现HTML位置感知
- <HeadFirst_HTML5> O'REILLY_Chap.6_与Web交流
- <HeadFirst_HTML5> O'REILLY_Chap.2_JavaScript和DOM
- <HeadFirst_HTML5> O'REILLY_Chap.4_JavaScript函数和对象
- <HeadFirst_HTML5> O'REILLY_Chap.9_Web存储(本地存储)
- <HeadFirst_HTML5> O'REILLY_Chap.10(完)_Web工作线程
- <Learning SQL> O'REILLY_Chap. 1_背景知识
- <Learning SQL> O'REILLY_Chap. 3_查询入门
- <HeadFirst_HTML与CSS> O'REILLY_Chap.1_认识HTML
- <HeadFirst_HTML与CSS> O'REILLY_Chap.4_连接起来
- <HeadFirst_HTML与CSS> O'REILLY_Chap.5_认识媒体
- <HeadFirst_HTML与CSS> O'REILLY_Chap.9_盒模型
- <HeadFirst_HTML与CSS> O'REILLY_Chap.11_布局和定位
- <HeadFirst_jQuery> O'REILLY_Chap.2_选择器与方法
- android虚拟机触屏事件模拟(利用exec函数来实现)
- You need to use a Theme.AppCompat theme (or descendant) with this activity
- 如何使用Python3.4连接MySQL
- 微信公众平台开发需要懂哪些技术
- crontab用法与实例
- <HeadFirst_HTML5> O'REILLY_Chap.7_画布
- 黑马程序员UI设计培训:在杭州,你猜UI设计师工资应该是多少?
- Android开发系列(二十三):实现带图片提示的Toast提示信息框
- xcode编写iphone第一个程序
- PagerSlidingTabStrip + ViewPager
- 前端仓库
- 进程对信号的处理
- mongodb 数据库操作--备份 还原 导出 导入
- cc-js 查看当前运行平台