HTML5 canvas游戏开发实战 3 : canvas高级功能

   图形的变化和设置界面的颜色

3.1 变形

   放大与缩小：scale(x, y)函数，xy轴放大，如果为负数，还可以使图形翻转。

   平移：translate(x, y)，xy轴平移

   旋转：rotate(angle)，参数为弧度，angle*Math.PI/180

   利用transform矩阵实现多样化的变形：transform(a, b, c, d, e, f)

|  a   c   e  |

|  b   d   f   |

|  0   0   1  |

3.2 图形的渲染

   绘制颜色渐变效果的图形：线性渐变和径向渐变

   线性渐变

      createLinearGradient(x1, y1, x2, y2)，初发点和终点

      addColorStop(position, color) ，position参数为0.0到1.0之间，表示渐变中颜色地点的相对地位；color表示渐变的颜色。

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	var grd = ctx.createLinearGradient(0, 0, 200, 0);
  	grd.addColorStop(0.2, "#00ff00");
  	grd.addColorStop(0.8, "#ff0000");
  	ctx.fillStyle = grd;
  	ctx.fillRect(0, 0, 200, 100);
  </script>  

     径向渐变

         createRadialGradient(x0, y0, r0, x1, y1, r1)，参数x0,y0为圆心，r0为开始圆的直径；x1,y1为结束圆的圆心，r1为结束圆的直径。

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	var grd = ctx.createRadialGradient(100,100,10,100,100,50);
  	grd.addColorStop(0, "#00ff00");
  	grd.addColorStop(1, "#ff0000");
  	ctx.fillStyle = grd;
  	ctx.fillRect(0, 0, 200, 200);
  </script>  

    颜色合成之globalCompositeOperation属性：说明了绘制到画布上的颜色是如何与画布上已有的颜色组合起来的

    颜色反转：对图形的每个像素进行颜色取反

    灰度控制：
    阴影效果：

3.3 自定义画板

    画板的建立：用鼠标

    Canvas画布的导出功能：使其保存为图片的格式