使用畫布完成一個(gè)太極陰陽(yáng)圖的繪制
繪制順序：
首先裹纳，先畫出一黑一白兩個(gè)半圓，畫出半圓后挨务，再在半徑的一半設(shè)置一個(gè)小圓击你，上半部分設(shè)置黑色，下半部分設(shè)置白色谎柄，再在小圓中再設(shè)置一個(gè)小圓丁侄，一個(gè)太極圖就完成了
完整代碼：
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();
再完成一個(gè)折線圖,折線圖的要點(diǎn)就是下一個(gè)線的開(kāi)始點(diǎn)是上一個(gè)條線的結(jié)束點(diǎn)朝巫，完整代碼：
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();
