一个练习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