canvas3-太极的实现
2018-01-02 本文已影响0人
likeli
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>太极</title>
</head>
<body>
<canvas id="c1" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var oc=document.getElementById("c1");
var cont=oc.getContext("2d");
//
cont.beginPath();
cont.fillStyle="lightgray";
cont.fillRect(0,0,500,500);
cont.stroke();
//画左侧黑色半圆
cont.beginPath();
cont.arc(250,250,100,Math.PI/2,Math.PI/2*3,false);
cont.fillStyle="black";
cont.strokeStyle="transparent"
cont.fill();
cont.stroke();
//画右侧白色半圆
cont.beginPath();
cont.arc(250,250,100,Math.PI/2,Math.PI/2*3,true);
cont.fillStyle="white";
cont.strokeStyle="transparent"
cont.fill();
cont.stroke();
//画黑色圆
cont.beginPath();
cont.arc(250,200,50,0,2*Math.PI);
cont.fillStyle="black";
cont.strokeStyle="transparent";
cont.fill();
cont.stroke();
//画白色圆
cont.beginPath();
cont.arc(250,300,50,0,2*Math.PI);
cont.fillStyle="white";
cont.strokeStyle="transparent";
cont.fill();
cont.stroke();
//画最小的白色圆
cont.beginPath();
cont.arc(250,200,10,0,2*Math.PI);
cont.fillStyle="white";
cont.strokeStyle="transparent";
cont.fill();
cont.stroke();
//画最小的黑色圆
cont.beginPath();
cont.arc(250,300,10,0,2*Math.PI);
cont.fillStyle="black";
cont.strokeStyle="transparent";
cont.fill();
cont.stroke();
</script>
</html>
01E92083-9CC3-4B38-9EB2-68594AAB1E74.png
