Question

我想在这个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>

由于

Answer 1

mouseover只会知道你何时在画布上，所以你需要检测到你在正方形之上（我正在使用你已经定义过的变量）：

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

Answer 2

收听鼠标事件并在我们自己的自定义mouseenter

上切换颜色

注意：rect没有mouseenter所以我们必须自定义构建一个。

收听mousemove活动
在rect mouseenter上：将wasInside标志设置为true，并将changeColor（）设置为切换矩形颜色
在rect mouseleave上：清除wasInside标志以指示鼠标已离开rect。

示例代码和演示：http://jsfiddle.net/m1erickson/9GcbH/

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

[添加：解释切换步骤]

每次鼠标进入rect时，都会调用changeColor。

changeColor既会改变颜色，也会改变切换。

以下是一步一步：

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;

如何在此代码中使用onmouseover？

2 个答案: