html5＜canvas模拟三维图形＞（旋转的正方体）

最新推荐文章于 2024-06-30 18:15:00 发布

sensus森森

最新推荐文章于 2024-06-30 18:15:00 发布

阅读量7.1k

点赞数

分类专栏： HTML4/HTML5 文章标签： canvas 三维正方形

本文链接：https://blog.csdn.net/qq_27682041/article/details/72726059

版权

本文通过HTML5的Canvas元素，利用二维坐标转换模拟实现了一个三维旋转的正方体效果。主要涉及的技术包括Canvas绘图、3D坐标变换以及数学算法的应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<html>
     <head>
          <style>
          canvas{
          background:#eee;
          }
          </style>
          <title>noTitle</title>
          <meta charset="">
          <link rel="stylesheet" href="">
          <script>
               window.οnlοad=function () {
               var canvas=document.getElementById("canvas");
               var cobj=canvas.getContext("2d");
               cobj.translate(250,250);
              var focusLen=300;
               var points=[
                   {x_3d:-50,y_3d:-50,z_3d:-50},
                    {x_3d:50,y_3d:-50,z_3d:-50},
                    {x_3d:50,y_3d:50,z_3d:-50},
                    {x_3d:-50,y_3d:50,z_3d:-50},

                    {x_3d:-50,y_3d:-50,z_3d:50},
                    {x_3d:50,y_3d:-50,z_3d:50},
                    {x_3d:50,y_3d:50,z_3d:50},
                    {x_3d:-50,y_3d:50,z_3d:50},
               ]
                   setInterval(function () {
                         cobj.clearRect(-200,-200,500,500);