堆栈内存溢出
  繁体   English   中英

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

[英]HTML5 canvas events not working properly in IE

 原文  2013-02-18 07:17:24  3   2    javascript/ html/ html5-canvas/ dom-events

问题描述

下面的代码功能类似于MSpaint的铅笔工具，下面的代码对于除IE之外的所有浏览器均正常工作，它在IE中没有错误，因为我已包含一个脚本文件以使画布标签在IE中运行，在IE中绘制徒手线条是在其他浏览器中无法正常运行。 如果我缓慢移动鼠标，它会工作一段时间，但是即使在IE中单击并移动鼠标，它也会停止绘制。 我应该做些什么改变？

加载body标签时调用-init方法 

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);});



    }

}

2 个解决方案

解决方案1
 0  2013-02-19 12:03:28

<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>

解决方案2
 0 已采纳  2013-02-20 00:21:35

抱歉，我无法在三个主要浏览器中的任何一个上运行您的任何代码。

这是在画布上进行“铅笔”绘制的基本策略：

在mousedown处理程序中：

-鼠标下降时保存lastX和lastY位置

-设置一个标志以指示鼠标已按下

在mousemove处理程序中：

-如果mousedown标志为false，则什么也不做。

-如果mousedown标志为true：

----从lastX / lastY到当前鼠标x / y画一条线

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

在mouseup和mouseout处理程序中：

-清除mousedown标志

这是代码和小提琴： 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML5中的textAlign属性Canvas在IE 11中无法正常工作 HTML5 Canvas撤消在IE或Firefox中无法正常工作 HTML5 canvas 游戏无法在 IE 中运行 HTML5 canvas clipRect无法正常工作 Html5画布动画不能正常工作 html5 canvas游戏中的更新功能无法正常工作 html5 canvas游戏无法在android avd中正常工作 HTML5画布上的drawImage无法正常工作 clearRect（）在html5 canvas中不起作用 HTML5 canvas requestAnimationFrame（）无法正常工作
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM