表格单元格中的画布无法在Firefox上工作

我尝试使用从http://dev.opera.com/articles/view/html5-canvas-painting/取得的example2绘制画布。它适用于Firefox 8.0.1和Opera 11.52。表格单元格中的画布无法在Firefox上工作

然后我修改了代码，将画布放到表格单元格中并停止工作。我试图把画布放在桌子的外面，将画布绝对定位在单元格桌子上仍然不起作用。上述问题只发生在Firefox上，在Opera上运行良好。

下面的代码

<!DOCTYPE html> 
<html lang="en"><head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta charset="utf-8"> 
    <title>Sign-In</title> 
    <style type="text/css"><!-- 
     #imageView { border: 1px solid #000; } 
    --></style> 
    </head> 
    <body> 
    <p>Please fill in name and id card no. Then sign-in on provided box</p> 
    <table> 
    <tr><td>Full Name</td><td><input name="name"><td> </tr> 
    <tr><td>ID Card No</td><td><input name="idcard"><td> </tr> 
    <tr><td>Signature</td><td> 
    <div id="container"> 
     <canvas id="imageView" width="200" height="100">  </canvas> 
    </div> 
    </td> </tr> 
</table> 
<script type="text/javascript" src="http://dev.opera.com/articles/view/html5-canvas-painting/example2.js"></script> 
</body></html>

任何想法？

来源

2011-12-10 Sableng

嗯，这里是你的代码的jsfiddle：http://jsfiddle.net/7PRDq/

的问题是几乎可以肯定的鼠标处理代码给人一种不好的X，Y在Firefox。如果您尝试在框的左上角绘制签名，则会看到它正在绘制不正确的偏移量。

如果您制作画布2000x1000而不是200x100，则会更清楚地看到问题！

您需要为FireFox找到更多现代鼠标代码。

来源

2011-12-10 04:27:26

这很奇怪，我检查了jsfiddle，它的工作虽然给Firefox意想不到的结果。在我的本地主机上，无法看到相同大小的任何东西。当我将canvas尺寸设置为500x500时，就像在jsfiddle上一样。无论如何，它给了我一个线索。谢谢@ simon-sarris – Sableng

表格单元格中的画布无法在Firefox上工作

回答

相关问题