Question

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

它在Windows和Android上运行良好但光标不一致会在iPad上留下一些线索。我正在使用getImageData和XOR＆＃39位和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>

Answer 1

这很可能是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中消失（ modified jsbin here ）。

希望这有帮助。

添加了原来的答案：

添加以下行：

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团队）。

Canvas putImageData XOR仅在iPad上发布

1 个答案: