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

最新推荐文章于 2021-12-08 16:43:03 发布

爆裂码手

最新推荐文章于 2021-12-08 16:43:03 发布

阅读量1.6k

点赞数 2

文章标签： html5 canvas html绘图

本文链接：https://blog.csdn.net/qq_18860653/article/details/53199324

版权

效果：

<!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>