var drawing = document.getElementById('drawing');
if(drawing.getContext) {
            /*绘制路径*/
            var context = drawing.getContext('2d');
            context.strokeStyle = 'pink';
            context.beginPath();//开始绘制新路径
            //绘制外圆
            context.arc(100, 100, 99, 0, 2*Math.PI, false);//参数依次为圆心坐标x、y、半径、起始角度(用弧度表示)、结束角度、起始角度是否按逆时针方向计算（flase为顺时针）
            context.moveTo(194, 100);//将绘图游标移动到（x,y）,不画线
            //绘制内圆
            context.arc(100, 100, 94, 0, 2*Math.PI, false);
            //绘制分针
            context.moveTo(100, 100);
            context.lineTo(100, 25);//从上一点开始绘制一条直线，到（x,y）为止
            //绘制时针
            context.moveTo(100, 100);
            context.lineTo(35, 100);
            //绘制文本
            context.font = 'bold 14px Arial';//表示文本样式、大小、字体
            context.textAlign = 'center';//文本对齐方式（start、end、left、right、center）,建议用start、end代替left、right
            context.textBaseline = 'middle';//文本的基线(top、hanging、middle、alphabetical、ideopgraphic、bottom)
            context.fillText('12', 100, 20);//参数：文本，文本的坐标
            //描边路径
            context.stroke();
            //额外练习
            context.moveTo(230, 10);
            //arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并以给定的半径穿过（x1,y1）
            context.arcTo(280, 60, 330, 10, 50);
            //bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到(x,y)为止，并以(c1x,c1y)(c2x,c2y)为控制点
            context.bezierCurveTo(210, 70, 290, 90, 300, 100);
            context.moveTo(320, 10);
            //quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并以(cx,cy)为控制点
            context.quadraticCurveTo(420, 100, 400, 10);
            //rect(x,y,width,height):从点(x,y)开始绘制矩形，此方法绘制的是矩形路径而不是独立的形状
            context.rect(450, 10, 50, 50);
            context.stroke();
}

var drawing = document.getElementById('drawing');
if(drawing.getContext) {
            //变换
            var context = drawing.getContext('2d');
            context.strokeStyle = 'rgba(0, 0, 255, 0.5)';
            context.beginPath();
            context.arc(100, 100, 99, 0, 2*Math.PI, false);
            context.moveTo(194, 100);
            context.arc(100, 100, 94, 0, 2*Math.PI, false);
            //变换原点
            context.translate(100, 100);//将坐标原点移动到该点
            //旋转表针
            context.rotate(1);//围绕原点旋转图像angle弧度
            //绘制分针
            context.moveTo(0, 0);
            context.lineTo(0, -80);
            //绘制时针
            context.moveTo(0, 0);
            context.lineTo(-65, 0);
            context.stroke();

            context.rotate(-1);
            context.fillStyle = 'rgba(0, 0, 255, 0.5)';
            context.save();//保存上下文状态，只保存绘图上下文的设置和变换，不会保存绘图上下文的内容
            context.fillStyle = 'pink';
            context.translate(-100, -100);
            context.save();
            context.fillStyle = 'green';
            context.fillRect(220, 10, 50, 50);

            context.restore();//返回之前保存的设置
            context.fillRect(280, 10, 50, 50);

            context.restore();
            context.fillRect(340, 10, 50, 50);
}

window.onload = function(){
        var drawing = document.getElementById('drawing');
        if(drawing.getContext) {
            //图像
            var context = drawing.getContext('2d');
            var image = document.images[0];
            //参数依次表示为：图像元素、源图像x坐标、y坐标、目标的宽度、高度
            context.drawImage(image, 0, 0, 150, 250);
            //参数依次表示为：图像元素、源图像x坐标、y坐标、源图像宽度、高度、目标图像x坐标、y坐标、目标图像宽度、高度
            context.drawImage(image, 100, 300, 500, 600, 0, 0, 70, 80);
        }
};