1.canvas常用的三个属性和方法：
canvas.width=1024;
canvas.height=768;
canvas.getContext("2d");
2.canvas绘图是状态绘制，即先设置好状态，再执行绘制，如：
var context=canvas.getContext("2d");
context.moveTo(100,100); //相当于将笔尖移到该位置
context.lineTo(700,700); //相当于笔尖要从起始位置移动到的位置
context.stroke(); //执行绘制

renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);//parentInt(hours / 10)因为需要拆成两位数

renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt);//15 * (RADIUS + 1),一个数字的宽度，下面以此类推

renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt);//这里是冒号，这里的10或者parseInt(hours / 10)这些都是传入的索引，对应digit.js里面的数组，所以数组中第10个是冒号，冒号占的宽度是9

绘制弧线：
context.arc( centerx, //圆心的横坐标
centery, //圆心的纵坐标
radius, //圆弧的半径
startingAngle, //弧线从哪个弧度值开始
endingAngle, //弧线结束于哪个弧度值
anticlockwise = false //可选参数，描述绘制弧线是以顺时针（值为false,默认情况下），还是逆时针( anticlockwise = true )
)

canvas是基于状态绘制。context.beginPath(): 状态开启的地方 context.closePath():状态结束的地方。在这之间的按照里面的状态进行设置
var context=canvas.getContext("2d");//提供绘制所需的接口
context.beginPath();
//左上角是坐标原点
context.moveTo(100,100);//开始位置
context.lineTo(700,700);//结束位置
context.lineTo(100,700);
context.lineTo(100,100);
context.lineWidth=4; //设置线粗细
context.strokeStyle="#005588";//设置线样式
context.stroke();//用于绘制线条
context.fillStyle="red";//设置填充的样式 context.fillStyle="rgb(2,100,3)" 或context.fillStyle="#005588"
context.fill();//用于填充
context.closePath();


context.beginPath();
context.moveTo(200,100);//开始位置
context.lineTo(700,600);//结束位置
context.strokeStyle="yellow";//设置线样式
context.stroke();
context.closePath();

canvas是基于状态绘制。context.beginPath(): 状态开启的地方 context.closePath():状态结束的地方。在这之间的按照里面的状态进行设置
var context=canvas.getContext("2d");//提供绘制所需的接口
context.beginPath();
//左上角是坐标原点
context.moveTo(100,100);//开始位置
context.lineTo(700,700);//结束位置
context.lineTo(100,700);
context.lineTo(100,100);
context.lineWidth=4; //设置线粗细
context.strokeStyle="#005588";//设置线样式
context.stroke();//用于绘制线条
context.fillStyle="red";//设置填充的样式 context.fillStyle="rgb(2,100,3)" 或context.fillStyle="#005588"
context.fill();//用于填充
context.closePath();


context.beginPath();
context.moveTo(200,100);//开始位置
context.lineTo(700,600);//结束位置
context.strokeStyle="yellow";//设置线样式
context.stroke();
context.closePath();

var tangram=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"green"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"red"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"yellow"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"blue"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"pink"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"black"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"gray"}
];
window.onload=function(){
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
for(var i=0;i<tangram.length;i++){
draw(tangram[i],context);
}
}
function draw(piece,cxt){
cxt.beginPath();
cxt.moveTo(piece.p[0].x,piece.p[0].y);
for(var i=1;i<piece.p.length;i++){
cxt.lineTo(piece.p[i].x,piece.p[i].y);
}
cxt.closePath();
cxt.fillStyle=piece.color;
cxt.fill();
}

digit.js存储二维点阵模型供countdown.js使用
digit.js 申明一个三维数组digit 0包含的是一个二维数组（0的二维点阵）...第十个位置是：对应的二维点阵 每一个数字的点阵表示是10*7大小的二维数组 ：是10*4大小的二维数组
countdown.js：
定义初始化——拿到canvas和context，给canvas大小赋值（两个全局变量）——绘制过程render（context）。
绘制canvas画布
function render(cxt){//绘制时钟，倒计时存储的具体数字
var hours=12
var minutes=34
var seconds=56
renderDigit（0,0，parseInt（hours/10）,cxt）//参数表示绘制数字的x坐标，绘制数字的y坐标，具体绘制那个数字,上下文绘图环境
}
function renderDigit（x,y,num,cxt）{
cxt.fillStyle="rgb(0,102,153)";
for(var i=0;i<digit[num].length;i++){
for(var j=0;j<digit[num].i.length;i++){
if(digit[num][i]==1){
//绘圆球
}
}
}
}