Не работает canvas

surranov · №1

Не работает следующий код в FF (последняя версия), при этом например в IE все работает нормально.
(при нажатии должна рисоваться линия в блоке canvas)

Так же при выводе например "alert("x: "+event.offsetX)" выдает "x: undefind". И это только в FF.

скрытый текст

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var canvas, ctx, w, h;
var flag = 0;
function init(){
canvas = document.getElementById("canvas");
w = canvas.width;
h = canvas.height;
ctx = canvas.getContext('2d');
ctx.strokeRect(0,0,w,h);

canvas.addEventListener("mousedown",function (event){
ctx.beginPath();
ctx.moveTo(event.offsetX, event.offsetY);
flag=0;
canvas.addEventListener('mousemove', function (event) {
if(flag==0){
ctx.lineTo(event.offsetX, event.offsetY);
ctx.stroke();
}
canvas.addEventListener('mouseup', function (event){
flag=1;
}, false);
}, false);

}, false);

}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="400" height="300">не поддерживается</canvas>
</body>
</html>

Отредактировано surranov (10-07-2014 16:47:32)

Infocatcher · №2

surranov пишет

Так же при выводе например "alert("x: "+event.offsetX)" выдает "x: undefind". И это только в FF.

А причем тут canvas?

offsetX/Y отсутствуют в стандарте:
http://www.w3.org/TR/DOM-Level-2-Events … MouseEvent
https://dvcs.w3.org/hg/dom3events/raw-f … ouseevents

Есть, правда, еще какой-то http://www.w3.org/TR/cssom-view/#extens … -interface
И заодно https://bugzilla.mozilla.org/show_bug.cgi?id=69787

Можно попробовать вот так:

Выделить код

Код:

var rc = canvas.getBoundingClientRect
    ? canvas.getBoundingClientRect()
    : { left: canvas.offsetLeft || 0, top: canvas.offsetTop || 0 };

и

Выделить код

Код:

ctx.moveTo(event.offsetX || event.clientX - rc.left, event.offsetY || event.clientY - rc.top);

Выделить код

Код:

ctx.lineTo(event.offsetX || event.clientX - rc.left, event.offsetY || event.clientY - rc.top);

Полезная информация

№110-07-2014 16:41:21