canvas 基础

canvas元素：Firefox,Chrome支持，IE不支持(可以使用excanvas库，将其转化为svg来实现)
在页面上定义一个canvas元素，需要指定长宽(px为单位)。如果使用excanvas库，不能够带单位。

<canvas id="graph" width=200 height=200 ></canvas>

var graph =  document.getElementById('graph');
	// 判断是否支持canvas绘画
    if(typeof graph.getContext != 'undefined'){
		//目前只支持2d图形,大小写敏感.
        var context = graph.getContext("2d");

        //矩形
        context.fillStyle = '#ccc';
        context.fillRect(0,0,200,200);
        context.clearRect(75,75,75,75);
        context.strokeStyle = "#ff0000";
        context.strokeRect(95,95,25,25);
		
		//画直线：
        context.beginPath();
        context.moveTo(150, 100);
        context.lineTo(200, 225);
        context.stroke();

		//一个三角区域
		context.beginPath();
		context.moveTo(150, 100);
		context.lineTo(200, 225);
		context.lineTo(250, 100);
        context.fillStyle = 'rgba(0,0,0,0.5)';
		context.fill();

		//arc弧度绘画方法参数：
        /*  arc(圆心X,圆心Y,半径r,起始弧度,结束弧度,填充逆时针标识)
		 *	1.弧度值(结束弧度 - 起始弧度)为正表示顺时针，为负表示逆时针
		 *	2.起始弧度为0，是指点(X+r,Y).
		*/

		//画一个圆
		context.beginPath();
		context.arc(100,100,50,0,2*Math.PI,false);
        context.stroke();

		//画扇形
		context.beginPath();
        // 设置起点在圆心
		context.moveTo(100,100);
        context.arc(100, 100, 50, 0, -Math.PI/2, true);
        //	闭合，从而可以画出扇形
        context.closePath();
        context.fillStyle = "#FB6CF9";
		context.fill();
        

		/* bezierCurveTo()贝塞尔曲线绘画方法：
         * 参数：
         *      起点的控制点的X坐标，
         *      起点的控制点的Y坐标,
         *      终点的控制点的X坐标,
         *      终点的控制点的Y坐标,
         *      终点的X坐标,
         *      终点的X坐标
         *      
         *      <i>起点为画笔的上次结束点，默认为(0,0)</i>
         * */
		 context.beginPath();
		 context.arc(200, 100, 50, 0, Math.PI, true);
		 context.lineTo(160, 100);
		 context.bezierCurveTo(170, 100, 180, 110, 180, 120);
		 context.bezierCurveTo(180, 125, 172, 140, 185, 140);
		 context.bezierCurveTo(198, 140, 190, 125, 190, 120);
		 context.bezierCurveTo(190, 110, 200, 100, 210, 100);
		 context.closePath();
		 context.stroke(); 
	}

上面贝塞尔曲线的效果

：