如何在此代碼中使用onmouseover？

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顏色
在rect鼠標離開時：清除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>

[添加：說明切換步驟]

每次鼠標進入矩形時，都會調用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 個解決方案

解決方案1
0 2014-03-11 17:02:34

解決方案2
0 已采納 2014-03-11 17:02:54

如何在此代碼中使用onmouseover？

問題描述

2 個解決方案

解決方案1 0 2014-03-11 17:02:34

解決方案2 0 已采納 2014-03-11 17:02:54

解決方案1
0 2014-03-11 17:02:34

解決方案2
0 已采納 2014-03-11 17:02:54