Drawing Tai Chi Diagram with JavaScript

今天，我们来介绍一下，如何基于JavaScript绘制太极图。

<html>
  <head>
    <title>Canvas tutorial</title>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
    <script type="text/javascript" src="./draw.js" />
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

draw.js

      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
			
			ctx.beginPath();
			ctx.arc(150, 50, 50, Math.PI*(1/2), Math.PI*(3/2), true);
			ctx.stroke();
			ctx.beginPath();
			ctx.arc(150, 150, 50, Math.PI*(3/2), Math.PI*(1/2), true);
			ctx.stroke();

			ctx.beginPath();
			ctx.arc(150, 100, 100, 0, Math.PI*2, true);
			ctx.stroke();
        }
      }

来源：oschina

链接：https://my.oschina.net/qwfys200/blog/4258743

标签

TaiChi

javascript

Solid

black

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!