Canvas绘制旋转太极

最新推荐文章于 2021-07-01 08:29:28 发布
最新推荐文章于 2021-07-01 08:29:28 发布
阅读量458 收藏 1
点赞数 1

之前在一片博文里面看到博主画了一个太极（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;
}
 

 

 


                

        

        

    




    

      

        

            

              
                
                  zeyu1021
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
Canvas 绘制旋转太极图

				
			

			

				

					H5
				

				

					08-31
					
					716
					
				

			

		

		

			
				
 

 



 

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta charset="utf-8" /&gt;

&lt;title&gt;01太极&lt;/title&gt;

&lt;style type="text/css"&gt;

#mal {

display: block

			
		

	



                

              
                



	

		

			

				
					
canvas实现 旋转太极图(第一发)

				
			

			

				

					Tonglanlinling的博客
				

				

					03-29
					
					490
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用canvas画太极图</title>
    <style>
        * {
            margin: 0;
            padding: 0...

			
		

	



                


  
              

                


	

		

			

				
					
Canvas制作旋转的太极的示例

				
			

			

				

					09-27
				

			

		

		

			
				
主要介绍了Canvas制作旋转的太极的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
js canvas制作动画，旋转的太极

				
			

			

				

					qq_41756580的博客
				

				

					08-20
					
					465
					
				

			

		

		

			
				
最近对于canvas有些兴趣，对于一些大神制作的优秀的h5动画心生向往，开始研究了canvas之旅，下面是练手之作。

效果：



源码如下：


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style media="screen">
  body {text-align:center}
  

			
		

	



		

			
		



	

		

			

				
					
canvas制作旋转的太极图

				
			

			

				

					梁伟业的博客
				

				

					07-21
					
					663
					
				

			

		

		

			
				
 


博主新手，请多谅解。欢迎指导！


以下为完整的代码段： 


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;/head&gt;
&lt;body&gt;
&lt;canvas id="canvas" wid

			
		

	





	

		

			

				
					
canvas绘制太极图

				
			

			

				

					01-08
				

			

		

		

			
				
css样式代码 .../* 给太极图设置旋转动画 */ @keyframes rotate{  0%{  transform: none;  }  100%{  transform: rotate(360deg);  } }  javascript代码 //文档加载完毕后执行函数 [removed] = function(){

			
		

	





	

		

			

				
					
canvas绘制太极图的实现示例

				
			

			

				

					01-21
				

			

		

		

			
				
看到了很多人写的太极图案，自己也来搞一下，今天就来.../* 给太极图设置旋转动画 */ @keyframes rotate{  0%{  transform: none;  }  100%{  transform: rotate(360deg);  } } javascript代码  //文档加载完毕后执行

			
		

	





	

		

			

				
					
HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）

				
			

			

				

					09-28
				

			

		

		

			
				
在这个例子中，我们将详细探讨如何利用HTML5 Canvas实现旋转动画，特别是创建一个旋转的太极图效果。  首先，我们要了解Canvas的基本用法。在HTML中，我们创建一个`<canvas>`元素，指定其宽度和高度，然后通过...

			
		

	





	

		

			

				
					
Canvas画太极图并旋转

				
			

			

				

					weixin_39616739的博客
				

				

					06-30
					
					409
					
				

			

		

		

			
				
<canvas id="myCanvas" width="500" height="500" >your browser does not support the canvas tag </canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById('myCanva...

			
		

	





	

		

			

				
					
Canvas实现太极图案并旋转

				
			

			

				

					qq_15167261的博客
				

				

					04-16
					
					1074
					
				

			

		

		

			
				
效果如下：


 
 
 
your browser does not support the canvas tag  
 
var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext("2d"); 
var angle = 0; 
var count = 360; 
var 

			
		

	





	

		

			

				
					
JS用Canvas绘制太极图.

				
			

			

				

					11-15
				

			

		

		

			
				
1.本项目是基于Dcloud的有一个移动APP项目
2.html5页面同时支持浏览器中访问
(绘制太极界面可以直接在浏览器中运行)

			
		

	





	

		

			

				
					
使用HTML5 Canvas绘制一个太极，并令其转动

				
			

			

				

					LiuZijian的博客o(^▽^)o
				

				

					10-09
					
					3339
					
				

			

		

		

			
				
使用HTML5 Canvas绘制一个太极，并令其转动。

			
		

	





	

		

			

				
					
canvas之旋转太极图

				
			

			

				

					qq_43575703的博客
				

				

					04-02
					
					261
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas之旋转太极图</title>
</head>

<body>
    <canvas id="my" width="600px"...

			
		

	





	

		

			

				
					
html5做旋转太极图,HTML5 Canvas旋转动画的2个代码例子（一个旋转的太极图效果）...

				
			

			

				

					weixin_33156085的博客
				

				

					07-01
					
					297
					
				

			

		

		

			
				
效果图：方法一：复制代码代码如下:your browser does not support the canvas tagvar deg = 0;var r = 30;var rl = 100;function drawtaiji() {var canvas = document.getelementbyid('mycanvas');var context = canvas.getcontext(...

			
		

	





	

		

			

				
					
旋转的太极

				
			

			

				

					xiaosuanzaowb的专栏
				

				

					10-15
					
					1032
					
				

			

		

		

			
				
今天突发奇想，想用matlab实现一个旋转的太极。说干就干。写程序，调程序，费劲周折，终于实现了这个2B的想法。
 
%绘制一个旋转的太极
function taiji
close all
clear
clc
r=1;%太极的大圆半径
figure;
title('太极','FontSize',25)
axis([-r r -r r])  %限制绘图范围
axis vis3d off

			
		

	





	

		

			

				
					
HTML5利用canvas绘制太极图案

				
			

			

				

					zhengzixiang666的博客
				

				

					02-23
					
					8538
					
				

			

		

		

			
				
代码如下：


    pageEncoding="utf-8"%>






var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//绘制左侧的白色半圆直径都是150
cxt.fillStyle="#FFFFFF";
cxt.beginPath();
cxt.arc(300,

			
		

	





	

		

			

				
					
太极图php代码,HTML 5：绘制旋转的太极图

				
			

			

				

					weixin_42467088的博客
				

				

					03-21
					
					102
					
				

			

		

		

			
				
HTML：Canvas绘制旋转太极JavaScript:varcanvas=document.getElementById("face");varcxt=canvas.getContext('2d');varr=100;//半径varpointX=0;//圆心x坐标varpointY=0;//圆心y坐标//绘制扇形填充functionpie(g,r...

			
		

	





	

		

			

				
					
使用matlab画可以旋转的太极图

				
			

			

				

					一名在读学生
				

				

					11-24
					
					2211
					
				

			

		

		

			
				
对于太极图，我在网上也找了一些方法来画。最后我选择了这个。
主要思路就是，先画两个大的半圆，拼成太极最外圈的圆，然后画两个小圆（小圆的位置可以自己多调几次，自己看的舒服就好），接着再画两个半圆，作为太极图中间的分割线。这样，太极的轮廓就画好了。
接下来就是填充颜色。涂色的画，建议根据面积，从大到小开始，利用图层覆盖来填充颜色。
那么就可以先给其中的一个大半圆填充成黑色（反正底色就是白色，白色就不用填充啦），然后填充“分割线”那里的两个半圆（虽然画的时候展现的是圆弧，其实是个半圆啦），
接下来，画一条白线，遮

			
		

	





	

		

			

				
					
HTML 5：绘制旋转的太极图

				
			

			

				

					淡忘~浅思
				

				

					12-07
					
					3581
					
				

			

		

		

			
				
HTML：

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8" />
    <title>Canvas绘制旋转太极</title>
</head>
<body>
    <canvas id="face" width="200" height="200"></canvas>
</body>
</html>

 

JavaScript:

var canvas = document.getElementById("face");
var cxt = ca

			
		

	





	

		

			

				
					
canvas绘制图片旋转

					
最新发布

				
			

			

				

					05-26
				

			

		

		

			
				
要在canvas上绘制旋转后的图片，可以使用以下步骤：

1. 创建一个Image对象并加载要绘制的图片。
2. 在canvas上创建一个2D上下文。
3. 使用上下文的`translate()`方法将绘图原点移动到图片中心。
4. 使用上下文的`rotate()`方法旋转画布。
5. 使用上下文的`drawImage()`方法绘制图片。

以下是示例代码：

```javascript
// 创建一个Image对象并加载图片
var img = new Image();
img.src = 'path/to/image.png';

// 在canvas上创建2D上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 等待图片加载完成
img.onload = function() {
  // 将绘图原点移动到图片中心
  ctx.translate(canvas.width/2, canvas.height/2);
  
  // 旋转画布
  ctx.rotate(Math.PI/4); // 旋转45度
  
  // 绘制图片
  ctx.drawImage(img, -img.width/2, -img.height/2);
}
```

注意，`rotate()`方法接收的参数是弧度而不是角度，所以需要将角度转换为弧度。在本例中，我们旋转了45度，所以我们将`Math.PI/4`传递给`rotate()`方法。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值