旋转期间HTML元素的渲染很差

时间：2014-05-14 06:02:03

标签： javascript html rendering

我用html编写了一个简单的Sudoko游戏。我有一个9行9列的表格，上面有不同的数字，玩家可以切换他们的位置。当他完成后，他点击一个按钮，验证表格单元格是合法的sudoko板。如果表是解决的sudoko，则所有单元格应使用SetInterval函数向右旋转。

但是，有些单元格的渲染速度不如其他单元格快。较低行的单元格在某些时刻停止旋转。我该如何解决这个问题？

这是我的代码：

<body>

<table id="SudukoTable">
    <tr>
        <td class="One" id="C1" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C2" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C3" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C4" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C5" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C6" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C7" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C8" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C9" onclick="SwitchWith(this)">1</td>       
    </tr>
     <tr>
        <td class="Two" id="C10" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C11" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C12" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C13" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C14" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C15" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C16" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C17" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C18" onclick="SwitchWith(this)">2</td>        
    </tr>
     <tr>
        <td class="Three" id="C19" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C20" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C21" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C22" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C23" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C24" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C25" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C26" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C27" onclick="SwitchWith(this)">3</td>        
    </tr>
     <tr>
        <td class="Four" id="C28" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C29" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C30" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C31" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C32" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C33" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C34" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C35" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C36" onclick="SwitchWith(this)">4</td>            
    </tr>
     <tr>
        <td class="Five" id="C37" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C38" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C39" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C40" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C41" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C42" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C43" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C44" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C45" onclick="SwitchWith(this)">5</td>        
    </tr>
     <tr>
        <td class="Six" id="C46" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C47" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C48" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C49" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C50" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C51" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C52" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C53" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C54" onclick="SwitchWith(this)">6</td>            
    </tr>
     <tr>
        <td class="Seven" id="C55" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C56" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C57" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C58" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C59" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C60" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C61" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C62" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C63" onclick="SwitchWith(this)">7</td>         
    </tr>
     <tr>
        <td class="Eight" id="C64" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C65" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C66" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C67" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C68" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C69" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C70" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C71" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C72" onclick="SwitchWith(this)">8</td>          
    </tr>
     <tr>
        <td class="Nine" id="C73" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C74" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C75" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C76" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C77" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C78" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C79" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C80" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C81" onclick="SwitchWith(this)">9</td>              
    </tr>

</table>
<button id="CheckBtn" onclick="RoateAll()">Finished</button>

这是我的javascript文件：

function RotateAll() {

setInterval(function () {
    angle++;

    for (var i = 1; i < 82; i++) {

        var a = document.getElementById("C" + i);
        a.style.webkitTransform = "rotate("+angle+"deg)"

    }
}, 60);

}

这是我的表格在其细胞轮次旋转后的样子：

enter image description here

2 个答案:

答案 0 :(得分：2)

您应该使用3d变换来启动硬件加速！

#SudukoTable td {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);

   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
}

查看演示 - http://jsfiddle.net/iancwoodward/sT7UJ/4/

3D变换适用于3D（显然），但是当您通过激活第3轴（即Z轴或translateZ）启动它时，它还具有启动OpenGl驱动程序的副作用，使您可以访问硬件加速。换句话说，您正在使用3D处理器 在您的计算机中渲染动画而不是正常的软件渲染。其他2个属性用于修复某些浏览器中的抖动动画，因为它们有时会尝试渲染对象的两侧，即使您只打算显示一侧。

答案 1 :(得分：0)

您是否尝试过其他浏览器？你在测试什么设备？也许它与图形速度有关。尝试增加angle+=5并查看是否有帮助。

仅供参考，有一些拼写错误，但我认为你在没有拼写错误的情况下进行测试。例如：

<button id="CheckBtn" onclick="RoateAll()">Finished</button>

在t

中缺少RotateAll() 
function RotateAll() {

缺少结束}

您应该设置angle = 0;（代码中未定义）

请注意，使用Firefox，您可以使用：

    a.style.MozTransform = "rotate("+angle+"deg)";
相关问题
最新问题