使用h5新特性canvas简单的完成一些效果

使用画布完成一个太极阴阳图的绘制
绘制顺序：
首先，先画出一黑一白两个半圆，画出半圆后，再在半径的一半设置一个小圆，上半部分设置黑色，下半部分设置白色，再在小圆中再设置一个小圆，一个太极图就完成了
完整代码：

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
    ctx.arc(400, 400, 100, 0,  Math.PI*2,false);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(400, 400, 100, Math.PI/2,  Math.PI/2*3,false); //PI就是圆周率π，PI是弧度制的π,也就是180°
    ctx.fillStyle = 'black';
    ctx.fill();
    ctx.beginPath();                   
    ctx.arc(400,400,100,Math.PI/2,Math.PI/2*3,true);
    ctx.fillStyle='white';
    ctx.fill();
    ctx.beginPath();
    ctx.arc(400,350,50,0,Math.PI*2,true);
    ctx.fillStyle='white';
    ctx.fill();
    ctx.beginPath();
    ctx.arc(400,450,50,0,Math.PI*2,true);
    ctx.fillStyle='black';
    ctx.fill();
    ctx.beginPath();
    ctx.arc(400,350,25,0,Math.PI*2,true);
    ctx.fillStyle='black';
    ctx.fill();
    ctx.beginPath();
    ctx.arc(400,450,25,0,Math.PI*2,true);
    ctx.fillStyle='white';
    ctx.fill();

再完成一个折线图,折线图的要点就是下一个线的开始点是上一个条线的结束点，完整代码：

var canvas = document.getElementById('mycanvas');
    var ctx = canvas.getContext('2d');  
    ctx.translate(100,900);   
    var data=[0,400,240,350,300,160];
    for(var i=0;i<data.length;i++){
        ctx.beginPath();
        ctx.moveTo(60*(i-1),-data[i-1]);
        ctx.lineTo(60*i,-data[i]);
        ctx.closePath();
        ctx.stroke();
    }
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,-700);
    ctx.strokeStyle='red'
    ctx.closePath();
    ctx.stroke();
    //
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(700,0);
    ctx.closePath();
    ctx.stroke();