Javascript 如何指定mousemove要触发的不同位置？_Javascript_Canvas

Javascript 如何指定mousemove要触发的不同位置？

javascript canvas

Javascript 如何指定mousemove要触发的不同位置？,javascript,canvas,Javascript,Canvas,代码 <!DOCTYPE html> <html> <head> <title>TEST</title> <style> body { background-color:#E4E0FF; } #canvas { border:10px solid red; background-color:white; } #canvas1 { border:10px solid red; background-color:white; }

代码

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<style>
body {
background-color:#E4E0FF;
}
#canvas {
border:10px solid red;
background-color:white;
}
#canvas1 {
border:10px solid red;
background-color:white;
}
#canvas2 {
border:10px solid red;
background-color:white;
}
</style>
</head>
<body>
<h1>My canvas Art Gallery</h1>
<canvas id="canvas" width="400" height="300">
</canvas>
<canvas id="canvas1" width="400" height="300">
</canvas>
<canvas id="canvas2" width="400" height="300">
</canvas>
<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>

<script type="text/javascript">
var c = document.getElementById("canvas");
var ctx = c.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 changeRadius;
var changeWidth;
var isDown = false;
var startX;
var startY;

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

ctx.fillStyle = "#000000";
ctx.fillRect(x, y, w, h);

function changeColor() {
if (toggle == 0) {
ctx.fillStyle = "#04B45F";
toggle = 1;
} else if (toggle ==1){
ctx.fillStyle = "#04B45F";
toggle = 2;
}else if (toggle == 2){
ctx.fillStyle = "#0000FF";
toggle = 3;
}else if (toggle == 3){
ctx.fillStyle == "#190707";
toggle = 4;
}else if (toggle == 4){
ctx.fillStyle = "#210B61";
toggle = 5;
}else if (toggle == 5){
ctx.fillStyle = "#FA58AC";
toggle = 6;
}else if (toggle ==6){
ctx.fillStyle = "#FFFF00";
toggle = 7;
}else{
ctx.fillStyle = "#F5A9D0";
toggle = 0;
}

ctx.fillRect(x, y, w, h);
}



(function () {

var c1 = document.getElementById("canvas1");
var ctx = c1.getContext("2d");
var $canvas = $("#canvas1");
var toggle = 0;
var x = 150;
var y = 100;
var w = 100;
var h = 100;
var r = 60;
var wasInside = false;

ctx.beginPath();
ctx.arc(200, 150, r, 0, 2 * Math.PI);
ctx.stroke();
changeRadius = function changeRadius() {
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(0, 0, 400, 300);
    r = Math.floor((Math.random() * 80) + 20);
    ctx.beginPath();
    ctx.arc(200, 150, r, 0, 2 * Math.PI);
    ctx.stroke();
 }
})();

(function () {
var c = document.getElementById("canvas2");
var ctx = c.getContext("2d");
var $canvas = $("#canvas2");

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

ctx.lineWidth = width;
ctx.moveTo(150,100);
ctx.lineTo(250,200);
ctx.stroke();


    changeWidth = function changeWidth() {
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0, 400, 300);    
width = Math.floor((Math.random()*50)+1);
ctx.lineWidth=width;
ctx.stroke();

}
})();

function handleMouseMove(e, canv) {
console.log(canv);
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) {
    switch(canv.id){
        case 'canvas':
    changeColor();
            break;
        case 'canvas1' :
    changeRadius();
            break;
        case 'canvas2':
    changeWidth();
            break;
    }
    wasInside = true;
 } else if (!isInsideNow && wasInside) {
    wasInside = false;
 }

 }

$("#canvas, #canvas1, #canvas2").mousemove(function (e) {
handleMouseMove(e,this);
});

</script>
</body>
</html>


试验
身体{
背景色：#E4E0FF；
}
#帆布{
边框：10px纯红；
背景色：白色；
}
#游说{
边框：10px纯红；
背景色：白色；
}
#游说{
边框：10px纯红；
背景色：白色；
}
我的画布艺术画廊
var c=document.getElementById（“画布”）；
var ctx=c.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 isDown=假；
var-startX；
var startY；
var=0；
var x=150；
变量y=100；
var w=100；
var h=100；
var r=60；
var wasinder=false；
ctx.fillStyle=“#000000”；
ctx.fillRect（x，y，w，h）；
函数changeColor（）{
如果（切换==0）{
ctx.fillStyle=“#04B45F”；
切换=1；
}else if（切换==1）{
ctx.fillStyle=“#04B45F”；
切换=2；
}else if（切换==2）{
ctx.fillStyle=“#0000FF”；
切换=3；
}else if（切换==3）{
ctx.fillStyle==“#190707”；
切换=4；
}else if（切换==4）{
ctx.fillStyle=“#210B61”；
切换=5；
}else if（切换==5）{
ctx.fillStyle=“#FA58AC”；
切换=6；
}else if（切换==6）{
ctx.fillStyle=“#ffffff00”；
切换=7；
}否则{
ctx.fillStyle=“#F5A9D0”；
切换=0；
}
ctx.fillRect（x，y，w，h）；
}
（功能（）{
var c1=document.getElementById（“canvas1”）；
var ctx=c1.getContext（“2d”）；
var$canvas=$（“#canvas1”）；
var=0；
var x=150；
变量y=100；
var w=100；
var h=100；
var r=60；
var wasinder=false；
ctx.beginPath（）；
ctx.arc（200，150，r，0，2*Math.PI）；
ctx.stroke（）；
changeRadius=函数changeRadius（）{
ctx.fillStyle=“#FFFFFF”；
ctx.fillRect（0,0,400,300）；
r=数学楼层（（数学随机（）*80）+20）；
ctx.beginPath（）；
ctx.arc（200，150，r，0，2*Math.PI）；
ctx.stroke（）；
}
})();
（功能（）{
var c=document.getElementById（“canvas2”）；
var ctx=c.getContext（“2d”）；
var$canvas=$（“#canvas2”）；
var=0；
var x=150；
变量y=100；
var w=100；
var h=100；
var宽度=2；
var wasinder=false；
ctx.lineWidth=宽度；
ctx.moveTo（150100）；
ctx.lineTo（250200）；
ctx.stroke（）；
changeWidth=函数changeWidth（）{
ctx.fillStyle=“#FFFFFF”；
ctx.fillRect（0,040300）；
宽度=数学地板（（数学随机（）*50）+1）；
ctx.线宽=宽度；
ctx.stroke（）；
}
})();
功能手柄移动（e、canv）{
控制台日志（canv）；
var mx=parseInt（e.clientX-offsetX）；
var my=parseInt（e.clientY-offsetY）；
var isInsideNow=（mx>x&&mxy&&my在这里，我可以使用.mouseenter
并删除许多isInside
和其他，但我不确定它是否满足您的要求：
我改变的是：
mousemove
多次触发（请参阅控制台）.为什么不使用mouseenter来代替呢？@Gaurang Tandon我怎么能使用mouseenter？我仍然需要指定触发动作的位置，对吗？谢谢，这不是我最初想要的，因为现在鼠标一碰到画布的任何部分就会发生更改，但最好能看到它能正常工作。
// Just the last few lines
function handleMouseMove(e, canv) {
console.log(canv);
    switch(canv.id){
        case 'canvas':
            changeColor();
            break;
        case 'canvas1' :
            changeRadius();
            break;
        case 'canvas2':
            changeWidth();
            break;
    }

}

$("#canvas, #canvas1, #canvas2").mouseenter(function (e) {
    handleMouseMove(e, this);
});