八卦图

八卦图

HTML绘制太极八卦图

阅读更多关于 HTML绘制太极八卦图

实现效果如下：实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>太极八卦图</title> <style type="text/css"> div{ text-align: center; margin-top: 30px; } #mytj{ background-color: skyblue; } </style> </head> <body> <div> <canvas width="600px" height="600px" id="mytj"></canvas> </div> <script type="text/javascript"> var mytj = document.getElementById('mytj'); var mt = mytj.getContext('2d'); //左边黑色大半圆 mt.beginPath(); mt.arc(300,300,200,90*Math.PI/180,270*Math.PI/180,false); mt.fillStyle='#000'; mt.fill(); //右边白色大半圆 mt.beginPath(); mt.arc(300,300,200,270*Math.PI/180,90*Math.PI/180

阅读更多关于八卦图

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>八卦图</title> </head> <body> <canvas id = "canvas" width = "500px" height = "500px"></canvas> </body> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(250,250,200,0,Math.PI*2); context.stroke(); context.beginPath(); context.arc(250,250,200,Math.PI/2,Math.PI*3/2); context.fill(); context.fillStyle =

订阅八卦图