您的位置：首页 > 其它

Canvas绘制旋转太极

2014-12-11 12:07 330 查看
之前在一片博文里面看到博主画了一个太极（http://blog.csdn.net/u011043843/article/details/41783571），不过里面的太极旋转是靠每0.5秒重新绘画一次而实现了。正好最近要学html5和css3，我就给它加了一个css3的旋转方法，放在上面。旋转更流畅了

HTML：

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas绘制旋转太极</title>
</head>
<body>
<canvas id="face" width="200" height="200"></canvas>
</body>
</html>
var canvas = document.getElementById("face");
var cxt = canvas.getContext('2d');
var r = 100;   //半径
var pointX = 0;  //圆心x坐标
var pointY = 0; //圆心y坐标

// 绘制扇形填充
function pie (g,radius,startAngle,endAngle,color,x,y)
{
<span style="white-space:pre">	</span> g.fillStyle = color;
g.beginPath();
g.arc(x,y,radius,startAngle,endAngle,true);
g.closePath();
g.fill();
}

var q = 0;
function redrawTaiji()
{
// 保存状态
cxt.save();
// 清理图像
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.translate(100,100);
q += Math.PI / 6;
cxt.rotate(q);
cxt.beginPath();
// 绘制两个最大圆
pie(cxt,r,3/4*Math.PI*2,5/4*Math.PI*2,"#FF072A",pointX,pointY);
pie(cxt,r,1/4*Math.PI*2,3/4*Math.PI*2,"#195089",pointX,pointY);
// 绘制两个中圆
pie(cxt,r/2,0,Math.PI*2,"#FF072A",pointX,pointY+r/2);
pie(cxt,r/2,0,Math.PI*2,"#195089",pointX,pointY-r/2);
// 绘制两个最小圆
pie(cxt,r/4,0,Math.PI*2,"#FF072A",pointX,pointY-r/2);
pie(cxt,r/4,0,Math.PI*2,"#195089",pointX,pointY+r/2);
cxt.closePath();
// 恢复状态
cxt.restore();
}
function initTaiji()
{
redrawTaiji();
}
initTaiji();


CSS:

@-webkit-keyframes rotate {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}<pre name="code" class="css">}
#face {
-webkit-mask-image: url("data:image/png[...]");
-webkit-mask-size: 30px 30px;
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航