HTML5画布事件在IE中无法正常工作

下面的代码功能类似于MSpaint的铅笔工具，下面的代码适用于除IE以外的所有浏览器，它在IE中没有错误，因为我已经包含了一个脚本文件来制作画布标记在IE中运行，在IE中绘制徒手画线不能正常工作，因为它在其他浏览器中工作。如果我慢慢移动鼠标它会工作一段时间，但即使在IE中单击并移动鼠标，它也会停止绘制。我应该做什么改变？HTML5画布事件在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 2013-02-18 07:59:11

html5 canvas必须使用IE9 – judgement 2013-02-18 08:50:20

@philipp版本是IE8 – 2013-02-18 08:55:04

对不起的负荷，我不能让你的任何代码在任何的3个主要的浏览器上运行。

下面是“铅笔”在画布上绘制的基本策略：

在鼠标按下处理程序：

- 保存的lastX和鼠标的lastY位置，当它下跌

- - 设置一个标志，表明该鼠标是向下

在鼠标移动处理程序：

- - 如果鼠标按下标志是假的，没做什么。

- - 如果鼠标按下标记为真：

----绘制从lastX/lastY一行当前鼠标的x/y

----设置lastX/lastY到当前鼠标的x/y

在mouseup和鼠标移开处理程序：

- 清除鼠标按下标志

这里的代码和一个小提琴：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画布事件在IE中无法正常工作

回答

相关问题