HTML5——canvas之动感太极

不念不忘少年蓝@ 2023-07-20 10:58 71阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmdzaHVkaWFu_size_16_color_FFFFFF_t_70][]

代码如下：

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

<table> 
 <tbody> 
  <tr> 
   <td>code</td> 
   <td>必需。要调用的函数或要执行的代码串。</td> 
  </tr> 
  <tr> 
   <td>millisec</td> 
   <td>必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>动感太极图</title>
    </head>
    <body>
    	<canvas id="myCanvas" width="600" height="600"
    	style="background: #3299CC">1234567</canvas>
    
    	<script>
    		var cav=document.getElementById("myCanvas")
    		var cxt=cav.getContext("2d")
    
    		var angle=0
             
    		setInterval(function(){
    			cxt.save()
    		cxt.translate(300,300)
    
    		cxt.rotate(angle)
    //大圆白色
    		cxt.beginPath()
    		cxt.fillStyle="#fff"
    		cxt.arc(0,0,200,0,2*Math.PI,false)
    		cxt.fill()
    		cxt.closePath()
    //黑色半圆
    		cxt.beginPath()
    		cxt.arc(0,0,200,0.5*Math.PI,1.5*Math.PI,false)//右为0和2，下为0.5，左为1，上为1.5
    		cxt.fillStyle="#000"
    		cxt.fill()
    		cxt.closePath()
    //白色小半圆
    		cxt.beginPath()
    		cxt.fillStyle="#fff"
    		cxt.arc(0,-100,100,0,2*Math.PI,false)//第一个管左右，增大会向右，第二个管上下，增大会向下
    		cxt.fill()
    		cxt.closePath()
     //画黑色小半圆
    		cxt.beginPath()
    		cxt.fillStyle="#000"
    		cxt.arc(0,100,100,0,2*Math.PI,false)
    		cxt.fill()
    		cxt.closePath()
     //画太极眼黑色
    		cxt.beginPath()
    		cxt.fillStyle="#000"
    		cxt.arc(0,-100,15,0,2*Math.PI,false)
    		cxt.fill()
    		cxt.closePath()
    //画太极眼白色
    		cxt.beginPath()
    		cxt.fillStyle="#fff"
    		cxt.arc(0,100,15,0,2*Math.PI,false)
    		cxt.fill()
    		cxt.closePath()
    
    		cxt.restore()
    
    		angle+=0.02
    
    		},5)
    
    		
    	</script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmdzaHVkaWFu_size_16_color_FFFFFF_t_70]: /images/20230528/eaf5c688ce904c0ab5a0ccb271bec546.png