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 - 第二个圆的半径