表格單元格中的畫布無法在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上工作

回答

相關問題