0

有谁知道下面的代码有什么问题。

演示：http: //jsbin.com/xecicovi/1/

它在 Windows 和 android 上运行良好，但光标不一致地在 iPad 上留下一些痕迹。我正在使用 getImageData 和 XOR'ing 位和 putImageData 来绘制和擦除矩形光标块。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script src="jquery-1.11.0.js"></script>
<script language="javascript">
var m_ctx;
var m_canvas;
var m_bCursorOn = false;
var m_nXpos = 0;

function DrawCursor()
{
   var nCellY = 10;
   var nCellH = 24;
   var nCellX = m_nXpos;
   var nCellW = 13;

   m_bCursorOn = !m_bCursorOn;

   // XOR the cursor location image to draw/erase the cursor
   var imgData = m_ctx.getImageData( nCellX, nCellY, nCellW, nCellH );
   var data = imgData.data;
   for(var i = 0; i < data.length; i += 4) 
   {
      data[i] ^= 255;
      data[i + 1] ^= 255;
      data[i + 2] ^= 255;      
   }
   m_ctx.putImageData( imgData, nCellX, nCellY );
}

function MoveCursor()
{
   if (m_bCursorOn)
      DrawCursor();

   m_nXpos += 13;
   if ( m_nXpos >1000)
      m_nXpos = 0;

   DrawCursor();
}

window.onload = function() 
{
   m_canvas = $('#myCanvas')[0];
   m_ctx = m_canvas.getContext("2d");
   m_canvas.width  = window.innerWidth;
   m_canvas.height = window.innerHeight;
   m_ctx.fillStyle = "black";
   m_ctx.fillRect( 0, 0, m_canvas.width, m_canvas.height );
   setInterval( function(){ DrawCursor();}, 301 );  // cursor blink
   setInterval( function(){ MoveCursor();}, 501 );
};

</script>
</head>

<body >
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
4

1 回答 1

0

这很可能是 Safari 浏览器如何处理后台缓冲区和像素纵横比与小数宽度的问题。它与子像素无关，因为您直接处理像素缓冲区。

您的代码本身是正确的；一种解决方法是将宽度值强制为画布的整数值

修改这些行：

m_canvas.width  = window.innerWidth;
m_canvas.height = window.innerHeight;

至

m_canvas.width  = window.innerWidth|0;  // removes fractions
m_canvas.height = window.innerHeight|0;

并且问题应该在 Safari 中消失（这里修改了 jsbin）。

希望这可以帮助。

添加回原来的答案：

添加这一行：

m_canvas.style.width  = ((m_canvaswindow.width/13)|0)*13+'px';

在这个位置：

window.onload = function() {
    m_canvas = $('#myCanvas')[0];
    m_ctx = m_canvas.getContext("2d");
    m_canvas.width  = window.innerWidth;
    m_canvas.height = window.innerHeight;

    m_canvas.style.width = ((m_canvas.width/13)|0)*13+'px';
    // possibly you will need this for height as well

    m_ctx.fillStyle = "black";
    m_ctx.fillRect( 0, 0, m_canvas.width, m_canvas.height );
    setInterval( DrawCursor, 301 );
    setInterval( MoveCursor, 501 );
};

这将强制大小适合光标大小（如果您更改光标大小，那么当然也必须更新那里的 13 - 只需使用动态值）。

除此之外：这显然是 Safari 浏览器的问题，这里的答案自然只能作为临时解决方法。对于这个问题，您无能为力，只能等待它得到解决（您应该考虑将其报告给 Safari 团队）。

于 2014-04-07T23:37:11.580 回答