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

发布时间:2019-03-13 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了html5 canvas 可调速的大风车转啊转脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!

效果:


<!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" onclick="fnStart(this)"><i class="fa fa-thumbs-up"></i>暂停</button>
    	<input id="range" type="range" min="0" max="100" value="5" onchange="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,document.getElementById("myCanvas").width,0);
    //var gradient=ctx.createLinearGradient(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,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,(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,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,(Math.PI/180)*0+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>

总结

以上是脚本之家为你收集整理的html5 canvas 可调速的大风车转啊转全部内容,希望文章能够帮你解决html5 canvas 可调速的大风车转啊转所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签:html绘图