html5 canvas 可调速的大风车转啊转

╰半夏微凉° 2022-07-15 12:55 126阅读 0赞

效果：

![Center][]

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="buttons.css">
        <title></title>
        <style>
    	   
    		#myCanvas{
    			margin: 0 auto;
    			border: black 1px solid;
    			text-align: center;
    		}
    		#my-bottom{
    			
    		}
    
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="400px" height="400px">
        </canvas>
    
        <div id="my-bottom">
        	 <button id="start-btn" οnclick="fnStart(this)"><i class="fa fa-thumbs-up"></i>暂停</button>
        	<input id="range" type="range" min="0" max="100" value="5" οnchange="change()">
        	<span id="value">5</span>
        </div>
    </body>
    </html>
    <script>
    
        var ctx = document.getElementById("myCanvas").getContext("2d");
        var runTime = 0;
        var speed = document.getElementById('range').value;
    		ctx.font="60px Georgia";
       	var gradient=ctx.createLinearGradient(0,0,document.getElementById("myCanvas").width,0);
        //var gradient=ctx.createLinearGradient(0,0,ctx.width,0);
    		gradient.addColorStop("0","magenta");
    		gradient.addColorStop("0.5","blue");
    		gradient.addColorStop("1.0","red");
    
        function run(){
    
        	//console.log(speed);
            var x;
            var y;
            //console.log("x:"+x+" y:"+y);
            ctx.clearRect(0,0,400,400);
            
    		// Fill with gradient
    		ctx.strokeStyle=gradient;
    		ctx.strokeText("大风车转啊转",10,350);
    
    		ctx.beginPath();
    
    
    		// 用渐变进行填充
    		ctx.strokeStyle="black";
            ctx.moveTo(100,100);
            ctx.lineTo(100,400);
            ctx.lineWidth=5;
            ctx.stroke();
    
            runTime+=speed*0.01;
    
            ctx.beginPath();
          	ctx.fillStyle="red";
    		ctx.strokeStyle="red";
            x=50*Math.sin(runTime);
            y=50*Math.cos(runTime);
            ctx.arc(100+x,100-y,50,(Math.PI/180)*90+runTime,(Math.PI/180)*270+runTime,false);
            ctx.stroke();
            ctx.closePath();
            ctx.fill();
    
            ctx.beginPath();
          	ctx.fillStyle="green";
          	ctx.strokeStyle="green";
            x=50*Math.sin(runTime+0.5*Math.PI);
            y=50*Math.cos(runTime+0.5*Math.PI);
            ctx.arc(100+x,100-y,50,(Math.PI/180)*180+runTime,(Math.PI/180)*360+runTime,false);
             ctx.stroke();
            ctx.closePath();
            ctx.fill();
    
            ctx.beginPath();
            ctx.fillStyle="blue";
            ctx.strokeStyle="blue";
            x=50*Math.sin(runTime+Math.PI);
            y=50*Math.cos(runTime+Math.PI);
            ctx.arc(100+x,100-y,50,(Math.PI/180)*270+runTime,(Math.PI/180)*90+runTime,false);
            ctx.stroke();
            ctx.closePath();
            ctx.fill();
    
            ctx.beginPath();
            ctx.fillStyle="yellow";
            ctx.strokeStyle="yellow";
            x=50*Math.sin(runTime+1.5*Math.PI);
            y=50*Math.cos(runTime+1.5*Math.PI);
            ctx.arc(100+x,100-y,50,(Math.PI/180)*0+runTime,(Math.PI/180)*180+runTime,false);
            ctx.stroke();
            ctx.closePath();
            ctx.fill();
        }
        
    var timer = setInterval(run,100);
    var flag = 1;
    function fnStart(myThis){
    	if(flag == 1){
    		clearInterval(timer);
    		flag = 0;
    		myThis.innerHTML="开始";
    	}else{
    		clearInterval(timer);
    		timer = setInterval(run,100);
    		flag = 1;
    		myThis.innerHTML="暂停";
    	}
       		
    }
    
    function change() {
      var value = document.getElementById('range').value;
      document.getElementById('value').innerHTML = value;
      speed = value;
    }
    </script>

[Center]: /images/20220715/67a6fb6b0f84484480be85d4c93b88b4.png