现在我要跟大家讲的非常重要
就是在页面当中怎么样绘图
那绘图实际上是要有一个画布的
Covers就是我们这个画布
Covers元素它是一个
HTML5新添加的页面标签元素
也是一块级元素
在页面当中
首先把它放到页面里面一个位置
接下来就可以在上面进行绘制了
对于Covers元素来说
它的语法相当简单
只需要声明
Covers 空格 宽度 空格 高度
分别等于多少像素
就可以在页面中圈出这么一个区域来
给你作为绘图的容器
对于Covers来说
有一个非常重要的属性要谈到的是
Covers本身所在页面的位置
我们要在页面中绘图
得有一个Covers的这个位置
让我们记录
我们可以使用一个块级元素DIV
来把Covers包含在其中
通过定义DIV的位置
让Covers能够在页面当中
非常好地展示出来
接下来我们来说说
到底如何使用Covers来绘图
具体说来 Covers对象本身
是一个HTML5的标准对象
您得使用DOM的API来得到它
所以第一句话一般都是
Document.getElement by ID
把Covers的ID传过去
当然这一系列的绘图动作
都是在JavaScript里边写的
所以Covers名为你的画笔
实际上要想操作这个画笔
您还得懂一点JavaScript的语言
Covers对象拿到之后
就有一个getContext的函数
getContext函数
会得到页面绘制的上下文
也就是我们在其它编程语言当中
所俗称的绘图句柄
有了它以后
我们可以真正地和绘图设备进行消息
那对Covers对象来说
可用的绘图句柄包含两种
第一种是2D 第二种是3D
平面绘图的办法
所有的矢量图的绘制
都要通过Covers的2D绘图方式来绘制
当然位图的绘制也是一样
我们待会讲位图绘制时候再说到
那3D的这个接口给谁用呢
是给Web GL用的
现在Web GL标准虽然已经有了
并且苹果的Safari新版本
Safari8里边
已经表示说我们要支持它
但因为广大的
Web Kit内核浏览器的跟进情况
没有这么乐观
而Windows的IE系统
又没有这么快地跟进
所以现在我们只说2D 先不聊3D的事儿
接下来就是Cover当中的坐标
有了这个Covers对象本身
画出这么一大块空间
我们准备在上边儿去画东西的时候
坐标就成为一个非常重要的事了
到底在哪画 这件事非常重要
Covers坐标系有两种
像所有的绘图系统一样
它都支持平面直角坐标系
跟极坐标系两个方式
平面直角坐标系大家都熟
从初中数学开始
几何就有平面几何的方法
我们举一个例子
现在我们要画一方形
这个方形怎么画呢
您就在平面直角的坐标系
X轴和Y轴当中
去画出这么一个大方块 这就叫方形
那Cover对象的平面直角坐标系
跟我们平常的平面直角坐标系不一样
您看到我们平常的平面几何当中的
平面直角坐标系
X轴Y轴这么一交叉
把空间分成四个象限
通常我们初中数学所有的绘制
全都在第一象限当中
所以坐标是X轴横向递增
Y轴纵向递增 是这么一个方式
Cover对象的坐标系不是
它实际上是在第四象限绘制的
所以它的坐标系是这个样子的
我这个两只手交叉的这个点
应该说是它的原点
横向的坐标沿X轴横向递增
纵向坐标Y轴沿纵轴往下递增
所以它的坐标是这个样子
除了这个平面直角坐标系以外
还有另外一个
我们在数学当中常用到的坐标系
那就是极坐标系
极坐标系首先定义一个原点
接下来定义一个正向的坐标轴
然后定义一个弧度
就是我们这个初设的这条线
和我们这个水平的这个坐标轴之间
所夹角的这个角度
还有一个就是这条线所具有的这个点
终点和我们这个原点之间的距离
通过这样的一个方式
比如说这样的一条线
和我们这个初设角之间的角度是30度
然后距离是1
那你就看到这么一条线出来了
极坐标的好处是在做扇形
还有各种曲面绘制的时候
它的这个方便程度很高
Cover对象本身对极坐标的支持有限
但是我们可以通过编程的方法
自己把平面直角坐标系转成极坐标
另外 Cover对象当中
也有绘制各种曲线
其中专门有绘制弧度的这种曲线
绘制弧度ARC的这个函数
它就支持使用极坐标系来进行绘制
所以也可以直接使用极坐标
但是要注意一点的是
使用极坐标的时候
你的这个极坐标的原点
不是平面直角坐标
平面直角坐标左上是原点
极坐标是平面中
任何一个点都可以是原点
你只要定义这一点是原点
你定义它的水平轴
然后你就可以定义它的极坐标系的坐标