Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve coning in HTML5". In daily operation, I believe many people have doubts about how to achieve coning in HTML5. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to achieve coning in HTML5". Next, please follow the editor to study!

one。 Brief introduction

Cone, a mathematical term, has two definitions.

Definition of analytic geometry: the spatial geometry consisting of a conical surface and a plane that cuts it (satisfying that the intersection line is a circle) is called a cone.

The definition of solid geometry: a straight line on the right side of a right triangle is the axis of rotation, and the surface formed by the rotation of the other two sides is called a cone. The right-angled edge is called the axis of the cone.

Unnamed

two。 Cone simulation

Through the above two definitions, I can simulate all the points on the cone:

JavaScript Code copies content to the clipboard

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.y, distance / Math.abs (cameraPosition.z-pointPositionsForShow.z), 0, Math.PI * 2, true)

Cxt.closePath ()

Cxt.fill ()

}

Await (Jscex.Async.sleep (50))

}

}))

At this point, the study on "how to achieve coning in HTML5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.