Fatal编程技术网
  • javascript/
  • Javascript 在这段代码中如何使用onmouseover？

Javascript 在这段代码中如何使用onmouseover？

javascript canvas

Javascript 在这段代码中如何使用onmouseover？,javascript,canvas,Javascript,Canvas,我想在这个javascript代码中使用onmouseover。因此，每当我将鼠标移到正方形上时，changeColor函数就会执行，每次从两种给定的颜色中选择一种颜色 <!DOCTYPE html> <html> <head> <title>TEST</title> </head> <body> <h1>Canvas Art Gallary</h1> <canvas id="myC

我想在这个javascript代码中使用onmouseover。因此，每当我将鼠标移到正方形上时，changeColor函数就会执行，每次从两种给定的颜色中选择一种颜色

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body>
<h1>Canvas Art Gallary</h1>
<canvas id="myCanvas" width="400" height="300" style="border:10px solid #c3c3c3">
</canvas>
<script type="text/javascript">
function changeColor(){
    ctx.fillStyle = "#FFFFFF";
    ctx.fillStyle = "#04B45F";
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(150,100,100,100);
</script>
</body>
</html>


测验
油画艺术勇气
函数changeColor（）{
ctx.fillStyle=“#FFFFFF”；
ctx.fillStyle=“#04B45F”；
}
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“#FF0000”；
ctx.fillRect（150100100）；
谢谢

鼠标上方
只会知道你在画布上方，所以你需要检测你在正方形上方（我使用的是你已经定义的变量）：

var sqx1=c.offsetLeft+150//相对于窗户，正方形的左上角
var sqy1=c.offsetTop+100；
var sqx2=sqx1+100//正方形相对于窗口的右下角
变量sqy2=sqy1+100；
var lastOverSquare=假；
c、 addEventListener（'mousemove'，函数（e）{
var过方=
（sqx1=e.pageX）&&
（sqy1=e.pageY）；
if（overSquare&！lastOverSquare）changeColour（）；//仅当它进入正方形时才更改，而不是当我们已经超过它时的每个动作。
lastOverSquare=过方；
}，假）；
变量颜色=['#FFFFFF'，'#04B45F']；
var CurrentColor=0；
ctx.fillStyle=颜色[当前颜色]；
函数changeColour（）{
CurrentColor=（CurrentColor+1）%colors.length；
ctx.fillStyle=颜色[当前颜色]；
}
监听鼠标事件，并在自定义的
鼠标指针上切换颜色

注意：rect没有
mouseenter
，因此我们必须定制一个

  • 监听mousemove事件
  • 在rect mouseenter上：将wasinder标志设置为true，并设置changeColor（），以切换rect颜色
  • On rect MOUSELEVE：清除WASINDER标志以指示鼠标已离开rect
示例代码和演示：

您的问题是“如何在javascript中创建鼠标悬停事件处理程序”？（代码中没有看到任何mouseover事件）Cheers我认为画布元素上的鼠标事件没有任何本机支持。然而，我使用了Kinetic JS库，它确实实现了事件处理：是的，rob，我将如何创建它？？这就是我想要的？？我知道我必须在代码中的某个地方使用onmouseover并将函数changeColor放在那里，但是我应该在哪里以及如何使用？？？您应该参考画布中rectagle的位置，然后在mouseover（htmlcanvaseElement显然已经支持mouseover事件）上，检查您的鼠标指针是否位于矩形的边界上，另一种方法是使用像Fabricjs或Paperjs这样的画布框架…为什么即使系统从未执行else语句，我仍然能够看到绿色（#04B45f），因为toggle=0，代码后面有toggle=1，但这并不意味着它将通过else代码，是吗？？我想这不会是因为上面已经进行了检查，但代码仍然有效，我最初是如何用小提琴将矩形画成绿色的。在上面的代码示例中，我设置了最初用红色绘制的矩形（表示它从未被鼠标点击过。我仍然不明白当“else”cmd从未通过时，它是如何变为绿色的！！我添加了一个关于切换工作原理的逐步解释：-）啊，谢谢你，我来自Java，所以我想不用while循环，因此，程序将永远不会再次执行if-else代码。顺便问一下，你如何选择最佳答案？？？ 
var sqx1 = c.offsetLeft +  150; //left top corner of the square respect to the window
var sqy1 = c.offsetTop + 100;
var sqx2 = sqx1 + 100;  //right bottom corner of the square respect to the window
var sqy2 = sqy1 + 100;

var lastOverSquare = false;
c.addEventListener('mousemove', function(e) {
     var overSquare = 
          (sqx1 <= e.pageX && sqx2 >= e.pageX) &&
          (sqy1 <= e.pageY && sqy2 >= e.pageY);

     if (overSquare && !lastOverSquare) changeColour(); //change only when it enters the square, not every move when we're already over it.
     lastOverSquare = overSquare;
}, false);

var colours = ['#FFFFFF', '#04B45F'];
var currentColour = 0;
ctx.fillStyle = colours[currentColour];
function changeColour() {
    currentColour = (currentColour + 1) % colours.length;
    ctx.fillStyle = colours[currentColour];
}

<!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>
<style>
    body{ background-color:ivory; }
    #canvas{border:1px solid red;background-color:black;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    var toggle=0;
    var x=150;
    var y=100;
    var w=100;
    var h=100;
    var wasInside=false;

    // draw the rect to start
    ctx.fillStyle = "red";
    ctx.fillRect(x,y,w,h); 

    function changeColor(){
      if(toggle==0){
          ctx.fillStyle = "#FFFFFF";
          toggle=1; 
      }else{
          ctx.fillStyle = "#04B45F"; 
          toggle=0;
      }
      ctx.fillRect(x,y,w,h); 
    } 


    function handleMouseMove(e){

        e.preventDefault();
        var mx=parseInt(e.clientX-offsetX);
        var my=parseInt(e.clientY-offsetY);

        var isInsideNow=(mx>x && mx<x+w && my>y && my<=y+h);

        if(isInsideNow && !wasInside){
            changeColor();
            wasInside=true;
        }else if(!isInsideNow && wasInside){
            wasInside=false;
        }

    }

    $("#canvas").mousemove(function(e){handleMouseMove(e);});

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Rect color toggles white-green<br>each time mouse moves over it.</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

1. toggle==0 at the beginning of the ap
2. mouse enters rect and changeColor is called.
3. changeColor changes color to #ffffff because toggle==0.
4. changeColor changes toggle=1
5. mouse exits rect
6. mouse enters rect again and changeColor is called again.
7. changeColor changes color to #04b45f because toggle==1.
8. changeColor changes toggle=0;