太极就是圆的拼接
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var c = canvas.getContext("2d");
c.translate(200,200);
//左边半圆
c.beginPath();
c.arc(0,0,100,Math.PI/2,3*Math.PI/2,false);
c.closePath();
c.fill();
c.stroke();
//右边半圆
c.beginPath();
c.arc(0,0,100,Math.PI/2,3*Math.PI/2,true);
// c.closePath();
c.stroke();
//上面部分
c.beginPath();
c.arc(0,-50,50,2*Math.PI,false);
c.closePath();
c.fillStyle="white";
c.fill();
//黑色小球
c.beginPath();
c.arc(0,-50,10,2*Math.PI,false);
c.closePath();
c.fillStyle="black";
c.fill();
//下面部分
c.beginPath();
c.arc(0,50,50,2*Math.PI,false);
c.closePath();
c.fillStyle="black";
c.fill();
//白色小球
c.beginPath();
c.arc(0,50,10,2*Math.PI,false);
c.closePath();
c.fillStyle="white";
c.fill();
//五角星方法，在9宫格上画出个五角星，然后按照9宫格的比例来做,我按照一格100比例来做
//五角星
c.save()
c.beginPath();
c.translate(200,200);
c.moveTo(0,-150);
c.lineTo(100,150);
c.lineTo(-150,-50);
c.lineTo(150,-50);
c.lineTo(-100,150);
c.closePath();
c.fill();
c.restore();
//9宫格
//行
c.beginPath();
c.translate(200,200);
c.moveTo(-150,-150);
c.lineTo(150,-150);
c.moveTo(-150,-50);
c.lineTo(150,-50);
c.moveTo(-150,50);
c.lineTo(150,50);
c.moveTo(-150,150);
c.lineTo(150,150);
//列
c.moveTo(-150,-150);
c.lineTo(-150,150);
c.moveTo(-50,-150);
c.lineTo(-50,150);
c.moveTo(50,-150);
c.lineTo(50,150);
c.moveTo(150,-150);
c.lineTo(150,150);
c.closePath();
// c.fill();
c.stroke();
</script>
</body>
网友评论