星空网 > 软件开发 > Java

html 5 canvas 绘制太极demo

  一个练习canvas的小案例。其中若有小问题,欢迎大神拍砖……^_*

  代码效果预览地址:http://code.w3ctech.com/detail/2500。

1   <div class="container">2     <canvas id="myCanvas" width="400" height="400" ></canvas>3   </div>

 1     * { 2       padding: 0; 3       margin: 0; 4     } 5  6     body { 7       background-color: #d5d3d4; 8     } 9 10     .container {11       width: 500px;12       height: 500px;13       position: relative;14       top: 80px;15       left: 50%;16       transform: translateX(-50%);17       background-color: #fff;18       border-radius: 10px;19       box-shadow: 0 0 5px #c2bfbf;20     }21     #myCanvas{22       border:1px solid #000;23       position:relative;24       top: 50px;25       left: 50px;26       transform:translate(-50%,-50%);27       border-radius:50%;28       animation: myfirst 30s linear infinite;29     }30     @keyframes myfirst31     {32       0%  {transform:rotate(0deg);}33       100% {transform:rotate(360deg);}34     }

 1     window.onload = function () { 2       var canvas=document.getElementById("myCanvas"); 3       var ctx=canvas.getContext("2d"); 4       ctx.beginPath(); 5       ctx.arc(200, 100, 100, -0.5 * Math.PI, 0.5 * Math.PI, false); 6       ctx.arc(200, 300, 100, 1.5 * Math.PI, 0.5 * Math.PI, true); 7       ctx.arc(200, 200, 200, 0.5 * Math.PI, 1.5 * Math.PI, false); 8       ctx.closePath(); 9       ctx.fillStyle = "black";10       ctx.fill();11 12       ctx.beginPath();13       ctx.arc(200, 100, 25, 0 * Math.PI, 2 * Math.PI, false);14       ctx.fillStyle = "white";15       ctx.fill();16       ctx.beginPath();17       ctx.arc(200, 300, 25, 0 * Math.PI, 2 * Math.PI, false);18       ctx.fillStyle = "black";19       ctx.fill();20     }

 




原标题:html 5 canvas 绘制太极demo

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Pique:https://www.goluckyvip.com/tag/24000.html
Pistol Lake:https://www.goluckyvip.com/tag/24001.html
Pitchbox:https://www.goluckyvip.com/tag/24002.html
Pitney Bowes:https://www.goluckyvip.com/tag/24003.html
Pivot:https://www.goluckyvip.com/tag/24004.html
PIX 支付:https://www.goluckyvip.com/tag/24005.html
从园岭新村到大梅沙海滨总站坐什么车:https://www.vstour.cn/a/363191.html
七月份适合去日本旅游吗 7月份去日本哪里好玩:https://www.vstour.cn/a/363192.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流