canvas绘制2048游戏的背景

最近痴迷于canvas强大的画图功能，从一个五角星到一片星空，再到2048游戏的背景，这个绘图功能的确很是牛，但是需要些初中数学的基础，比如说今天涉及到的圆角矩形就需要了解三角函数，弧度和角度的转化诸如这样的知识，如果忘了，快去悄悄地补补

这个就是最后的图形显示。

首先我们先来分析一哈圆角矩形的绘制路径，看下图，

还原成一个矩形，就会有width,height,将圆角矩形的四个圆角都当四分之一个圆进行计算，圆的半径为r，则四个四分之一半圆的圆心坐标如图所示。

canvas中绘制圆的函数为arc(圆心x坐标，圆心y坐标，半径，开始弧度，结束弧度，true[逆时针]或false[顺时针]),则从左上角开始的四个圆弧的绘制路径分别为

左上角：context.arc(r, r ,r,Math.PI,Math*PI*3/2,false);

右上角：context.arc(width-r, r , r ,Math.PI*3/2,Math.PI*2,false);

  左下角：context.arc(r, height-r ,r,Math.PI/2,Math*PI.);

       右下角：context.arc(width-r, height-r , r ,0,Math.PI/2);

PS:canvas中的圆的弧度就如右图圆所标注的一样，不管是顺时针或者逆时针他，这几个弧度依旧在这个位置，但是若开始角度和结束角度相同，绘制的图形，顺时针的图形就是完整的圆减去逆时针绘制的图形的部分，即顺时针和逆时针绘制的圆，合起来是完整的圆。

最后用lineTo(x,y),将所有的弧用直线连起来即是一个圆角矩形，核心代码如下：

//绘制圆角矩形
function drawRoundRect(cxt, width, height, r){
    cxt.beginPath();
    cxt.arc( r , r , r , Math.PI, Math.PI*3/2);
    cxt.lineTo( width-r, 0);
    cxt.arc( width-r, r , r, Math.PI*3/2, Math.PI*2);
    cxt.lineTo( width, height-r);
    cxt.arc( width-r, height-r, r, 0, Math.PI/2);
    cxt.lineTo( r, height);
    cxt.arc( r, height-r, r, Math.PI/2, Math.PI);
    //cxt.lineTo( 0, r);
    cxt.closePath();

}