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