표 셀의 캔버스가 Firefox에서 작동하지 않습니다.

http://dev.opera.com/articles/view/html5-canvas-painting/에서 가져온 example2를 사용하여 캔버스를 그려 봅니다. Firefox 8.0.1 및 Opera 11.52에서 작동합니다.표 셀의 캔버스가 Firefox에서 작동하지 않습니다.

그럼 코드를 수정하여 캔버스를 테이블 셀에 넣고 작업을 중단하십시오. 테이블 외부에 캔버스를 놓으려고했으나 셀 테이블에 캔버스가 절대 배치되지 않았는데도 여전히 작동하지 않습니다. 위의 문제는 Opera에서만 잘 작동하는 Firefox에서만 발생했습니다.

여기에 코드

<!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. 상자의 왼쪽 상단 모서리에 서명을 그리려고하면 잘못된 오프셋을 사용하여 그림이 표시됩니다.

200x100 대신 캔버스 2000x1000을 만들면 문제가 훨씬 더 분명하게 보입니다!

FireFox의 최신 마우스 코드를 찾아야합니다.

출처

2011-12-10 04:27:26

jsfiddle에서 확인한 것은 이상한 일입니다. Firefox에서 예기치 않은 결과가 있지만 문제는 아닙니다. 내 로컬 호스트에서 동일한 크기의 항목을 볼 수 없습니다. jsfiddle처럼 캔버스 크기를 500x500으로 만들었습니다. 어쨌든 은 단서를주었습니다. 감사합니다 @ 사이먼 - 사리 – Sableng

표 셀의 캔버스가 Firefox에서 작동하지 않습니다.

답변

관련 문제