HTML5怎么實現圓錐

這篇文章主要介紹“HTML5怎么實現圓錐”，在日常操作中，相信很多人在HTML5怎么實現圓錐問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5怎么實現圓錐”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一.簡介

圓錐，數學領域術語，有兩種定義。

解析幾何定義：圓錐面和一個截它的平面（滿足交線為圓）組成的空間幾何圖形叫圓錐。

立體幾何定義：以直角三角形的一條直角邊所在直線為旋轉軸，其余兩邊旋轉形成的面所圍成的旋轉體叫做圓錐。該直角邊叫圓錐的軸 。

未命名

二.圓錐模擬

通過以上兩個定義，我可以模擬出圓錐上所有的點：

JavaScript Code復制內容到剪貼板

var pointPositions = [];  

for (var i = -100; i < 200; i += 10) {  

    var xTemp = getRandomNumber(-i, i);  

    var zTemp = Math.sqrt(Math.abs(i * i - xTemp * xTemp));  

    pointPositions.push(new Vector3(xTemp, i, zTemp));  

}  

i 既是h,又是半徑r。

這個時候，我們生成的 Z都是大于零的，不過沒有關系，我們等下可以通過旋轉來補齊所有的點。

三.旋轉與投影

JavaScript Code復制內容到剪貼板

//旋轉  

    function rotate(angle) {  

        for (var i = 0; i < pointPositions.length; i++) {  

            var tempX = pointPositions[i].x;  

            var tempZ = pointPositions[i].z;  

            pointPositions[i].x = pointPositions[i].x * Math.cos(angle) - pointPositions[i].z * Math.sin(angle);  

            pointPositions[i].z = pointPositions[i].z * Math.cos(angle) + tempX * Math.sin(angle);  

        }  

    }  

    //投影  

    function projection(v) {  

        var v1 = new Vector3();  

        v1.x = v.x * distance / Math.abs(cameraPosition.z - v.z);  

        v1.y = v.y * distance / Math.abs(cameraPosition.z - v.z);  

        v1.z = v.z;  

        return v1;  

    }  

四.動畫

JavaScript Code復制內容到剪貼板

var currentAngle = 0;  

    var roundAsync = eval(Jscex.compile("async", function () {  

        while (true) {  

            pointPositionsForShow.length = 0;  

            currentAngle += 0.1;  

            rotate(degToRad(currentAngle));  

            PositionsProjection();  

            for (var i = 0; i < pointPositionsForShow.length; i++) {  

                cxt.fillStyle = randomColor();  

                cxt.beginPath();  

                if (pointPositionsForShow[i].z > 0) cxt.globalAlpha = 1;  

                if (pointPositionsForShow[i].z < 0) cxt.globalAlpha = 0.1;  

                cxt.arc(centreOfCirclePosition.x + pointPositionsForShow[i].x, centreOfCirclePosition.x + pointPositionsForShow[i].y, distance / Math.abs(cameraPosition.z - pointPositionsForShow[i].z), 0, Math.PI * 2, true);  

                cxt.closePath();  

                cxt.fill();  

            }  

            $await(Jscex.Async.sleep(50));  

        }  

    }))  

到此，關于“HTML5怎么實現圓錐”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！