html canvas 圆旋转

2021-02-05 20:01:52 阅读：189 来源： 互联网

标签：canvas angle ctx 旋转 html var height Math

<html>
    <head>
        <title圆旋转</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            canvas{
                background-color: black;
            }
        </style>
        <script>
            function clear(){
	            ctx.beginPath();
	            ctx.clearRect(0, 0, width, height);
	            ctx.closePath();
	        }
            function ArcClass(x, y, a){
	            this.x = x;
	            this.y = y;
	            this.angle = a == undefined ? -90 : a;
	        }
	        ArcClass.prototype.draw = function(){
	        
	            if(isArc){
	                ctx.beginPath();
		            ctx.arc(this.x, this.y, r, 0, Math.PI * 2);
		            ctx.strokeStyle = "white";
		            ctx.stroke();
		            ctx.closePath();
	            }
	            
	            var radian = this.angle * Math.PI / 180;
	            var x = Math.cos(radian) * r + this.x;
			    var y = Math.sin(radian) * r + this.y;
			    ctx.beginPath();
			    ctx.arc(x, y, 10, 0, Math.PI * 2);
			    ctx.fillStyle = "red";
			    ctx.fill();
			    ctx.closePath();
			    this.angle += 1;
			    if(this.angle >= 270)
			        this.angle = -90;
	        };
        </script>
    </head>
    <body>
        <input value="打印线" type="button" onclick="isArc = isArc == false;" />
        <canvas id="canvas" ></canvas>
    </body>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var width = window.innerWidth;
        var height = window.innerHeight;
        var cx = width / 2;
        var cy = height / 2;
        
        var list = new Array();
        var r = 100;
        var isArc = true;
        
        canvas.width = width;
        canvas.height = height;
        
        arcBig();
        
        var id = setInterval(function(){
            clear();
            ctx.beginPath();
            ctx.fillStyle = "#000000";
		    ctx.fillRect(0, 0, width, height);
		    ctx.closePath();
            list.forEach(function(ball){
                ball.draw();
            });
        //    clearInterval(id);
        }, 0);
        
        
        
        // 一共36个球
        // 分为四个阶段 36 / 4 = 9
        function arcBig(){
            var r = 70;
            ctx.beginPath();
	        ctx.arc(cx, cy, 200, 0, Math.PI * 2);
	        ctx.strokeStyle = "white";
	        ctx.stroke();
	        ctx.closePath();
	        var a = 90;
	        for(var angle = -90 ; angle <= 270 ; angle += 10 ){
	            var radian = angle * Math.PI / 180;
		        var x = Math.cos(radian) * r + cx;
				var y = Math.sin(radian) * r + cy;
				
			 // add(x, y, angle); // 传入angle 一起放大一起缩小
			 
			 // add(x, y, angle - 200); // 控制起始位置
			 
			    add(x, y, a -= 10); // 3d 旋转
	        }
        }
        
        function add(x, y, a){
            var c = new ArcClass(x * 1, y * 1, a);
            list.push(c);
            return c;
        }
        
        
    </script>
</html>

标签：canvas,angle,ctx,旋转,html,var,height,Math
来源： https://blog.csdn.net/qq_39237554/article/details/113702900

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html canvas 圆旋转