我怎么把这些代码组合在一起
How would I put this code together?
我有一个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>
那么,我如何告诉程序在第二个画布上做圆的东西,在第三个画布上做线??我还没有调用changeWidth和changeRadius函数,因为它只会在第一个画布中做,弄得一团糟。我只需要在这部分代码中调用不同画布
中的不同函数 if (isInsideNow && !wasInside) {
changeColor();
wasInside = true;
} else if (!isInsideNow && wasInside) {
wasInside = false;
}
我不是一个画布专家,但只是给你一个想法,看看这个提琴
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
检查这2行,上下文ctx
将用id=canvas
在画布上绘制。您可以创建其他上下文变量来在其他画布中绘制或重用相同的。
更新小提琴
更新更新:FIDDLE
相关文章:
- 如何将jQuery代码组合到JavaScript函数中
- 我正在尝试组合这个javascript代码
- 将循环和数组合并到我的代码中
- 如何组合关键代码以在javascript中协同工作
- 将两行代码与JavaScript组合在一个函数中
- 任何人都可以帮助我编写代码,以便在 extjs 4.2 的组合框中制作带有复选框的面板
- 在 jQuery 中将多个函数与相同的代码组合在一起
- 如何在javascript中设置键代码的组合
- 如何将两个函数的代码与不同的参数组合在一起
- 为多种表单组合ajax代码
- 用于从组合框中获取选定值的JavaScript代码
- 将两个对象与多个节点组合在一起——为什么这段代码有效
- 如何从asp.net代码中自动启动组合键Ctrl P
- 请帮助获取以下用于组合框属性的代码
- JavaScript代码更改组合框输出中的所有图像,而不是所需的图像
- Jquery组合框,代码中的选择
- 我如何将代码后面的循环创建的Javascript函数组合为一个函数,这样我就不会'不必重复
- 用于组合循环、文本、复选框和结果的JavaScript代码
- 循环遍历数组中的字符,对于每个可能的3个字符的组合运行代码
- 我怎么把这些代码组合在一起