Javascript 我如何将这些代码组合在一起？_Javascript_Canvas

Javascript 我如何将这些代码组合在一起？

javascript canvas

Javascript 我如何将这些代码组合在一起？,javascript,canvas,Javascript,Canvas,我有一个Javascript程序在三个不同的地方工作：及但我不知道如何将它们放在一个文件中。这就是我现在的处境 <!DOCTYPE html> <html> <head> <title>TEST</title> <style> body { background-color:#E4E0FF; } #canvas { border:10px solid red; background-color:white; } #can

我有一个Javascript程序在三个不同的地方工作：及但我不知道如何将它们放在一个文件中。这就是我现在的处境

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<style>
body {
background-color:#E4E0FF;
}
#canvas {
border:10px solid red;
background-color:white;
}
#canvas2 {
border:10px solid red;
background-color:white;
}
#canvas3 {
border:10px solid red;
background-color:white;
}
</style>
 </head>
 <body>
<canvas id="canvas" width="400" height="300">
</canvas>
<canvas id="canvas2" width="400" height="300">
</canvas>
<canvas id="canvas3" 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 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 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 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) {
 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);
});
$("#canvas2").mousemove(function (e) {
handleMouseMove(e);
});
$("#canvas3").mousemove(function (e) {
handleMouseMove(e);
});

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

我不是一个画布专家，但只是为了给你一个想法，看看这个

检查这两行，上下文

ctx

将使用

id=canvas

在画布中绘制。您可以创建其他上下文变量以在其他画布中绘制，也可以重复使用相同的上下文变量

更新

更新更新：

您想要3个画布/1个javascript控制所有3个画布文件，还是想要1个画布完成所有的矩形、圆形和线条？是的，我想要3个画布，但它只对第一个画布中的鼠标移动做出反应！我试图使它们彼此独立。它仍然不是独立的，我想要的是，如果我将鼠标移到第一个画布上，那么更改应该始终在第一个画布上，而其他两个画布上的更改应该是独立的。@user3421518您可以在mousemove事件处理程序中简单地处理它们。。这是最简单的部分。。选中此复选框，如果它解决了问题，请接受答案。如果我根本不做任何更改，并尝试从浏览器运行它，它仍然不工作，即使在JSFIDLE上，前两个画布工作，第二个在向下滚动时工作，但最后一个根本不工作。这是为什么？WADR，这不是一个正确的答案：-[OP希望在所有3张画布上产生效果。由于有3张画布需要滚动才能进入视图，您还必须调整滚动位置。

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

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");