HTML5 canvas 이벤트가 IE에서 제대로 작동하지 않습니다.

아래 코드는 MSpaint의 연필 도구와 같은 기능을합니다. 아래 코드는 IE를 제외한 모든 브라우저에서 제대로 작동하지만, IE에서 오류를주지 않습니다. 스크립트 파일을 포함하여 캔버스를 만들었습니다. 태그를 IE에서 실행하면 IE의 프리 핸드 라인을 그리는 것이 다른 브라우저에서 작동하므로 제대로 작동하지 않습니다. 마우스를 천천히 움직이면 잠시 동안 작동하지만 마우스를 클릭하여 IE로 이동하더라도 그리기가 중단됩니다. 어떤 변화를 만들어야합니까 ??HTML5 canvas 이벤트가 IE에서 제대로 작동하지 않습니다.

-init 방법은 body 태그

var canvas; 
var ctx; 
var canX; 
var canY; 
var rltvX; 
var rltvY; 
var x = "black"; 
var flag = false; 
var w, h; 
function findxy(res, e) 
{ 

    if (res == 'down') 
    { 
     canX = e.clientX - canvas.offsetLeft - 10; 
     canY = e.clientY - canvas.offsetTop - 35; 
     flag = true; 
     dot_flag = true; 
     if (dot_flag) 
     { 
      ctx.beginPath(); 
      ctx.fillStyle = x; 
      ctx.fillRect(canX, canY, 2, 2); 
      ctx.closePath(); 
      dot_flag = false; 
     } 
    } 
    if (res == 'up' || res == "out") 
    { 
     flag = false; 
     flag = false; 
    } 
    if (res == 'move') 
    { 
     if (flag) { 
      rltvX = canX; 
      rltvY = canY; 
      canX = e.clientX - canvas.offsetLeft - 10; 
      canY = e.clientY - canvas.offsetTop - 35; 
      ctx.beginPath(); 
      ctx.moveTo(rltvX, rltvY); 
      ctx.lineTo(canX, canY); 
      ctx.strokeStyle = x; 
      ctx.lineWidth = 2; 
      ctx.stroke(); 
      ctx.closePath(); 
     } 
    } 
} 



function init() 
{ 

    canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d"); 
    w = canvas.width; 
    h = canvas.height; 


    if (canvas.addEventListener) 
    { 
     canvas.addEventListener("mousemove", function(e) { 
      findxy('move', e); 
     }, false); 
     canvas.addEventListener("mousedown", function(e) { 
      findxy('down', e); 
     }, false); 
     canvas.addEventListener("mouseup", function(e) { 
      findxy('up', e); 
     }, false); 
     canvas.addEventListener("mouseout", function(e) { 
      findxy('out', e); 
     }, false); 

    } else { 

     canvas.attachEvent("onmousemove", function(e) {findxy('move', e);}); 
     canvas.attachEvent("onmousedown", function(e) {findxy('down', e);}); 
     canvas.attachEvent("onmouseup", function(e) {findxy('up', e);}); 
     canvas.attachEvent("onmouseout", function(e) {findxy('out', e);}); 



    } 

}

출처

2013-02-18 mohit_pipariya

IE 버전? – philipp

html5 캔버스는 IE9를 사용해야합니다. – judgement

@philipp 버전은 IE8 –

죄송의 부하라고, 나는 3 대 브라우저 중 실행하기 위해 코드 중 하나를 가져올 수 없습니다. 이는 MouseDown 핸들러에서

다음은 캔버스에 그리기 "연필"을위한 기본 전략 년대 lastX 마우스의 lastY 위치가 아래로

갔다 --Save

- 마우스를 아래로

mouseMove 및 핸들러에 있음을 표시하는 플래그를 -set 다음 이는 mouseDown 플래그가 false 굳이 이렇게

, 아무것도하지 마세요. mousedown 플래그 굳이 이렇게

사실이다 :

가 ---- lastX을 ---- 현재 마우스 X/Y

에 lastX/lastY에서 선을 그립니다 설정 /에 lastY 현재 마우스 X/Y 모르기 때문에 mouseUp과로 마우스 핸들러에서

이는 mouseDown 플래그 여기

--clear의 코드와 바이올린 : http://jsfiddle.net/m1erickson/hJ9Lt/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]--> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var lastX; 
    var lastY; 
    var strokeColor="red"; 
    var strokeWidth=2; 
    var canMouseX; 
    var canMouseY; 
    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var isMouseDown=false; 


    function handleMouseDown(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 
     $("#downlog").html("Down: "+ canMouseX + "/" + canMouseY); 

     // Put your mousedown stuff here 
     lastX=canMouseX; 
     lastY=canMouseY; 
     isMouseDown=true; 
    } 

    function handleMouseUp(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 
     $("#uplog").html("Up: "+ canMouseX + "/" + canMouseY); 

     // Put your mouseup stuff here 
     isMouseDown=false; 
    } 

    function handleMouseOut(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 
     $("#outlog").html("Out: "+ canMouseX + "/" + canMouseY); 

     // Put your mouseOut stuff here 
     isMouseDown=false; 
    } 

    function handleMouseMove(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 
     $("#movelog").html("Move: "+ canMouseX + "/" + canMouseY); 

     // Put your mousemove stuff here 
     if(isMouseDown){ 
      ctx.beginPath(); 
      ctx.moveTo(lastX,lastY); 
      ctx.lineTo(canMouseX,canMouseY); 
      ctx.stroke();  
      lastX=canMouseX; 
      lastY=canMouseY; 
     } 
    } 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
    $("#canvas").mouseup(function(e){handleMouseUp(e);}); 
    $("#canvas").mouseout(function(e){handleMouseOut(e);}); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 

    <p id="downlog">Down</p> 
    <p id="movelog">Move</p> 
    <p id="uplog">Up</p> 
    <p id="outlog">Out</p> 
    <canvas id="canvas" width=300 height=300></canvas> 

</body> 
</html>

출처

2013-02-20 00:21:35 markE

<html> 
<head> 
<script type="text/javascript" src="jquery-1.9.1.js"></script> 
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> 

<style> 
body{ background-color: ivory; } 
canvas{border:1px solid red;} 
</style> 

<script> 
var flag = false; 
$(function(){ 

var canvasOffset=$("#canvas").offset(); 
var offsetX=canvasOffset.left; 
var offsetY=canvasOffset.top; 


var ctx; 
var canvas; 
var canMouseX; 
var canMouseY; 
var rltvX; 
var rltvY; 
var x = "black"; 



//ctx = $("#canvas").getContext("2d"); 
canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 


function handleMouseDown(e){ 
    canMouseX=parseInt(e.clientX-offsetX); 
    canMouseY=parseInt(e.clientY-offsetY); 
    $("#downlog").html("Down: "+ canMouseX + "/" + canMouseY); 

    // Put your mousedown stuff here 
    flag = true; 
    dot_flag = true; 
    if (dot_flag) { 
     ctx.beginPath(); 
     ctx.fillStyle = x; 
     ctx.fillRect(canMouseX, canMouseY, 2, 2); 
     ctx.closePath(); 
     dot_flag = false; 
    } 
} 

function handleMouseUp(e){ 
    canMouseX=parseInt(e.clientX-offsetX); 
    canMouseY=parseInt(e.clientY-offsetY); 
    $("#uplog").html("Up: "+ canMouseX + "/" + canMouseY); 


    // Put your mouseup stuff here 
    flag = false; 
} 

function handleMouseOut(e){ 
    canMouseX=parseInt(e.clientX-offsetX); 
    canMouseY=parseInt(e.clientY-offsetY); 
    $("#outlog").html("Out: "+ canMouseX + "/" + canMouseY); 


    // Put your mouseOut stuff here 
    flag = false; 
} 

function handleMouseMove(e){ 
    //canMouseX=parseInt(e.clientX-offsetX); 
    //canMouseY=parseInt(e.clientY-offsetY); 
    $("#movelog").html("Move: "+ canMouseX + "/" + canMouseY); 

    // Put your mousemove stuff here 
    if (flag) { 

     rltvX = canMouseX; 
     rltvY = canMouseY; 

     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY);   

     ctx.beginPath(); 
     ctx.moveTo(rltvX, rltvY); 
     ctx.lineTo(canMouseX, canMouseY); 
     ctx.strokeStyle = x; 
     ctx.lineWidth = 2; 
     ctx.stroke(); 
     ctx.closePath(); 
    } 
} 




$("#canvas").mousedown(function(e){handleMouseDown(e);}); 
$("#canvas").mousemove(function(e){handleMouseMove(e);}); 
$("#canvas").mouseup(function(e){handleMouseUp(e);}); 
$("#canvas").mouseout(function(e){handleMouseOut(e);}); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 

<p id="downlog">Down</p> 
<p id="movelog">Move</p> 
<p id="uplog">Up</p> 
<p id="outlog">Out</p> 
<canvas id="canvas" width=300 height=300></canvas> 

</body> 
</html>

출처

2013-02-19 12:03:28

HTML5 canvas 이벤트가 IE에서 제대로 작동하지 않습니다.

답변

관련 문제