HTML5中的canvas基本概念及绘图

* Canvas(画布)
* 基本内容
* 简单来说,HTML5提供的新元素<canvas>
* Canvas在HTML页面提供画布的功能
* 在画布中绘制各种图形
* Canvas绘制的图形与HTML页面无关
* 无法通过DOM获取绘制的图形
* 无法为绘制的图形绑定DOM事件
* 只能使用Canvas提供的API
* Canvas用途
* 在HTML页面中绘制图表(例如柱状图、饼状图等)
* 网页游戏 - Flash技术
* 使用HTML5中的Canvas
* 如何使用Canvas
* 在HTML页面中定义<canvas>元素
* 在javascript代码中
* 获取<canvas>元素
* 创建画布对象
* getContext('2d')方法
* 使用Canvas提供的API
* 绘制图形
* 绘制矩形
* fillRect(x,y,width,height) - 实心矩形
* x和y - 矩形的左上角坐标值
* width - 设置矩形的宽度
* height - 设置彗星的高度
* strokeRect(x,y,width,height) - 空心矩形
* clearRect(x,y,width,height)
* 清除指定区域的矩形
* 设置颜色
* fillStyle - 设置填充颜色
* strokeStyle - 设置描边颜色
* globalAlpha - 设置透明度(0-1)
* 设置渐变
* 线型渐变 - createLinearGradient(x1,y1,x2,y2)
* 具有基准线 - 起点(x1,y1)和终点(x2,y2)
* 扇形(射线)渐变 - createRadialGradient(x1,y1,r1,x2,y2,r2)
* 具有柱形(锥形) - 两个圆的面积
* 参数
* x1和y1 - 第一个圆的圆心坐标值
* r1 - 第一个圆的半径
* x2和y2 - 第二个圆的圆心坐标值
* r2 - 第二个圆的半径