画布画太极

最新推荐文章于 2024-11-04 16:17:23 发布

weixin_30260399

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量162

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bhba223/p/11558452.html

版权

这是代码效果图在下面

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>20-test1</title>
   <style type="text/css">
       canvas{
           animation-name: move;
           animation-duration: 2s;
           animation-iteration-count: infinite;
           animation-timing-function: linear;
       }
       div{
           width: 400px;
           margin: 40px auto;
       }
       @keyframes move{
           0%{
               transform:rotate(0deg);
           }
           100%{
               transform:rotate(360deg);
           }
       }
   </style>
   <script type="text/javascript">
       window.οnlοad=function(){
           var canvas = document.getElementById('canvas')
           var context = canvas.getContext('2d')
           context.beginPath()
           context.arc(200,200,200,Math.PI/2,Math.PI*3/2)
           context.closePath()
           context.fillStyle = 'black'
           context.fill()

           context.beginPath()
           context.arc(200,200,200,Math.PI*3/2,Math.PI/2)
           context.closePath()
           context.fillStyle = 'red'
           context.fill()

           context.beginPath()
           context.arc(200,100,100,0,Math.PI*2)
           context.closePath()
           context.fillStyle = 'black'
           context.fill()

           context.beginPath()
           context.arc(200,300,100,0,Math.PI*2)
           context.closePath()
           context.fillStyle = 'red'
           context.fill()

           context.beginPath()
           context.arc(200,100,10,0,Math.PI*2)
           context.closePath()
           context.fillStyle = 'red'
           context.fill()

           context.beginPath()
           context.arc(200,300,10,0,Math.PI*2)
           context.closePath()
           context.fillStyle = 'black'
           context.fill()

           // context.rotate(180)
       }
   </script>
</head>
<body>
   <div>
       <canvas id="canvas" width="400px" height="400px"></canvas>
   </div>
</body>
</html>