鲁达 今天小编将分享前端开发中必学的知识点，HTML5中关于canvas(画布)的知识点；
基本内容
Canvas，是HTML5中所有新特性目前应用最广泛的一个标签，替代引入的图片(图形)，用途非常广泛如（因此这个标签相当重要）：
1.完成HTML页面中的图形绘制
2.实现网络游戏或单机游戏(网页游戏)
3.在HTML页面中绘制图表
4.饼状图
5.柱状图
6.折线图
7.网页游戏
...
Canvas的发展方向，目前主流的游戏开发引擎之一，如：白鹭引擎 - HTML5、Cocos-JS - HTML5、掌握物理系统、掌握精灵系统(地图)、HTML5网页游戏。
需要特别注意的是：Canvas作为HTML页面的元素出现、在Canvas绘制的图形与HTML页面是无关的、利用DOM定位绘制的图形、元素的事件不能绑定绘制的图形
如何使用Canvas（分2步骤）
HTML页面部分：定义<canvas>元素、建议使用width和height属性设置<canvas>元素的宽度和高度
JavaScript部分：获取HTML页面中的<canvas>元素、通过getContext()方法创建画布对象、该方法接收一个参数 - 创建二维或三维图形
需要特别注意的是：该参数为字符串类型、"2d"或"3d"中的"d"必须小写、目前几乎都是"2d"效果、使用Canvas提供的API完成需求。
常见的应用
应用一：绘制图形
fillRect(x,y,width,height) - 绘制实心矩形
x和y - 表示绘制矩形的左上角的坐标值(x,y)
width - 表示绘制矩形的宽度
height - 表示绘制矩形的高度
strokeRect(x,y,width,height) - 绘制空心矩形
x和y - 表示绘制矩形的左上角的坐标值(x,y)
width - 表示绘制矩形的宽度
height - 表示绘制矩形的高度
clearRect(x,y,width,height) - 清除指定区域的矩形
x和y - 表示绘制矩形的左上角的坐标值(x,y)
width - 表示绘制矩形的宽度
height - 表示绘制矩形的高度
设置样式
fillStyle - 设置填充样式
strokeStyle - 设置描边样式
globalAlpha - 设置透明度(0-10-100-10-1000-10-1000000-10-10000-10-10000-10-10000-10-10000-10-1000-10-100000-100-100-1)
需要特别注意的是：先设置样式,再绘制图形，每改变一次样式,都需要重新设置样式，填充样式与描边样式互不干扰
应用二：线性渐变
createLinearGradient(x1,y1,x2,y2)
线性渐变具有一个基准线
射线(扇形)渐变
createRadialGradient(x1,y1,r1,x2,y2,r2)
射线渐变具有两个基准圆
设置渐变颜色
addColorStop(position,color)方法
color - 颜色
实现步骤如下：
1.设置线性渐变或扇形渐变
2.返回渐变对象
3.渐变对象设置渐变的颜色
4.设置填充或描边样式为渐变
应用三：绘制文字
设置属性：font - 用法与CSS中的font一致
对齐方式：
textAlign - 水平对齐
left - 基准线在文字的左边
center - 基准线在文字的中间
right - 基准线在文字的右边
textBaseline - 垂直对齐
top - 基准线在文字的上边
middle - 基准线在文字的中间
bottom - 基准线在文字的下边
hanging - 悬挂基线
alphabetic - 字母基线
绘制方法
fillText(text,x,y) - 绘制实心文字
text - 设置绘制的文字内容
x和y - 设置绘制文字的坐标值
strokeText(text,x,y) - 绘制空心文字
text - 设置绘制的文字内容
x和y - 设置绘制文字的坐标值
设置阴影
shadowColor - 设置阴影颜色
shadowOffsetX - 设置阴影水平位置
正值 - 阴影向右移动、0 - 阴影不移动、负值 - 阴影向左移动
shadowOffsetY - 设置阴影垂直位置
正值 - 阴影向下移动、0 - 阴影不移动、负值 - 阴影向上移动
shadowBlur - 设置阴影的程度
值的类型为Number、值越大,阴影效果越明显