替代Flash技术最好的选择------HTML5（4）

look_w

三、Canvas(画布)
1、基本内容

1.1、 HTML5提供的新元素
1.2、 Canvas在HTML页面提供画布的功能
可以在页面中绘制各种图形
1.3、 canvas绘制的图形与HTML页面无关
无法通过DOM获取绘制的图形
无法为绘制的推行绑定DOM事件
1.4、 只能使用canvas提供的API

1.5、 主要用途

          在HTML页面中绘制图标(例如柱状图、饼状图等)
          网页游戏 - Flash技术
              使用HTML5中的canvas
     
    1.6. 如何使用canvas
     
       1）在HTML页面中定义<canvas>元素     
          默认宽度 300*150
          效果上类似于div
          问题：
             定义canvas元素的宽度和高度
                style设置-绘制图形被拉伸
                属性方式 - 没有任何问题
       2）获取<canvas>元素
       3）获取画布对象
           getContext("2d");
           参数类型是string类型，参数必须是“2d”或“3d”(固定写法)
       4）使用Canvas提供的API
           context.fileRect(10,10,100,100);

2、高级内容
1、API提供的工具非常广泛，包括创建图形、颜色、文本等

2、矩形

      1）绘制实心矩形
      
         fillRect(x,y,width,heigth)
      
      2）绘制空心矩形
     
         strokeRect(x,y,width,heigth)
     
      3）清除指定区域的像素，类似于橡皮擦
     
         clearRect(x,y,width,height)

3.、设置颜色 - 如果在创建图像时，没有指定颜色，那么所有图形都会使用纯黑色

      1）声明形状线条的颜色
         strokeStyle
     
      2）声明形状内部区域的颜色
         fillStyle
     
      3）透明度属性。可以设置画布上图形的透明度
         globalAlpha
     
     HTML5的难度
     
       HTML5的核心API相对来讲，都不难
       HTML5的案例真正难在逻辑(js代码)
       总结：HTML5离不开js
     
     第二阶段js，抓紧复习
     
       个人不建议 - 留级

4、 渐变效果 - canvas支持的渐变效果包括线性渐变或射线渐变，并且支持颜色转折点

      1）在画布上创建一个渐变对象
     
        var grd = context.createLinearGradient(x1,y1,x2,y2)
     
          x1,y1 - 基准线的起点坐标值
          x2,y2 - 基准线的终点坐标值
     
        var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2)
     
           x1,y1 - 第一个基准圆的元素坐标值
           r1 - 第一个基准圆的半径
     
           x2,y2,r2同上
     
          返回一个渐变对象
     
      2）给渐变对象指定渐变颜色值
      
         addColorStop(position,color)
     
         position - 指设置渐变颜色的位置(0-1)
     
      3） 将渐变对象作为画布对象的颜色
     
          context.fillStyle = grd;
     
      4） 绘制矩形
     
           context.fillRect(0,0,400,400);