Question

如果这是一个愚蠢的问题，我很抱歉。我是Javascript的新手。我想绘制两个可以通过几个按钮控制的矩形。
我可以实现一个矩形，它工作正常：http://jsfiddle.net/6vxd03qq/
但是，我不确定为什么实现两个矩形的代码不起作用：http://jsfiddle.net/yhhk9meg/
是否可以使用课程来做到这一点？如果是的话怎么样？

代码：

HTML：

<!DOCTYPE html>
<title>test</title>
<canvas id="canvas"></canvas>
<br>
<button id="moveRight"><==</button>
<button id="moveLeft">==></button>
<button id="bigger">Bigger</button>
<button id="smaller">Smaller</button>
<button id="filled">Filled</button>
<button id="empty">Empty</button>

使用Javascript：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;

var object = {
        height: 50,
        width: 50,
        x: 100,
        y: 50, 
        filled: false       
}


    document.getElementById("moveRight").addEventListener("click", function(){
        object.x -= 10;
    });
    document.getElementById("moveLeft").addEventListener("click", function(){
        object.x += 10;
    });
    document.getElementById("bigger").addEventListener("click", function(){
        object.height += 10;
        object.width += 10;
    });
    document.getElementById("smaller").addEventListener("click", function(){
        object.height -= 10;
        object.width -= 10;
    });
    document.getElementById("filled").addEventListener("click", function(){
        object.filled = true;
    });
    document.getElementById("empty").addEventListener("click", function(){
        object.filled = false;
    });



    function renderCanvas(){
        ctx.fillStyle = "#EEEEEE";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    function renderObject(){
        if(object.filled == true){
            ctx.fillStyle = "#FF0000";
            ctx.fillRect(object.x, object.y, object.width, object.height);
            ctx.strokeRect(object.x, object.y, object.width, object.height);
        }
        if(object.filled == false){
            ctx.rect(object.x, object.y, object.width, object.height);
            ctx.strokeRect(object.x, object.y, object.width, object.height);
            }
    }

function fun(){
    renderCanvas();
    renderObject();
}

setInterval(fun, 10);

以下是我的输出应该是什么的屏幕截图：

Answer 1

你两次声明了一些画布代码。我编辑了你的小提琴，让它运作起来。

Fiddle here

代码：

＆＃13;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;

var object = {
		height: 50,
		width: 50,
		x: 100,
		y: 50, 
		filled: false		
}

var object1 = {
		height: 50,
		width: 50,
		x: 100,
		y: 50, 
		filled: false		
}


	document.getElementById("moveRight").addEventListener("click", function(){
    	object.x -= 10;
	});
	document.getElementById("moveLeft").addEventListener("click", function(){
    	object.x += 10;
	});
	document.getElementById("bigger").addEventListener("click", function(){
    	object.height += 10;
    	object.width += 10;
	});
	document.getElementById("smaller").addEventListener("click", function(){
    	object.height -= 10;
    	object.width -= 10;
	});
	document.getElementById("filled").addEventListener("click", function(){
    	object.filled = true;
	});
	document.getElementById("empty").addEventListener("click", function(){
    	object.filled = false;
	});
  
  
  <!-- 2nd controls -->
  
  	document.getElementById("moveRight1").addEventListener("click", function(){
    	object1.x -= 10;
	});
	document.getElementById("moveLeft1").addEventListener("click", function(){
    	object1.x += 10;
	});
	document.getElementById("bigger1").addEventListener("click", function(){
    	object1.height += 10;
    	object1.width += 10;
	});
	document.getElementById("smaller1").addEventListener("click", function(){
    	object1.height -= 10;
    	object1.width -= 10;
	});
	document.getElementById("filled1").addEventListener("click", function(){
    	object1.filled = true;
	});
	document.getElementById("empty1").addEventListener("click", function(){
    	object1.filled = false;
	});



	function renderCanvas(){
		ctx.fillStyle = "#EEEEEE";
		ctx.fillRect(0, 0, canvas.width, canvas.height);
	}

	function renderObject(){
		if(object.filled == true){
			ctx.fillStyle = "#FF0000";
			ctx.fillRect(object.x, object.y, object.width, object.height);
			ctx.strokeRect(object.x, object.y, object.width, object.height);
		}
		if(object.filled == false){
			ctx.rect(object.x, object.y, object.width, object.height);
			ctx.strokeRect(object.x, object.y, object.width, object.height);
			}
	}
  
  function renderObject1(){
		if(object1.filled == true){
			ctx.fillStyle = "#FF0000";
			ctx.fillRect(object1.x, object1.y, object1.width, object1.height);
			ctx.strokeRect(object1.x, object1.y, object1.width, object1.height);
		}
		if(object.filled == false){
			ctx.rect(object1.x, object1.y, object1.width, object1.height);
			ctx.strokeRect(object1.x, object1.y, object1.width, object1.height);
			}
	}

function fun(){
	renderCanvas();
	renderObject();
  renderObject1();
}
	
setInterval(fun, 10);

＆＃13;

<canvas id="canvas"></canvas>
<br>
<button id="moveRight"><==</button>
<button id="moveLeft">==></button>
<button id="bigger">Bigger</button>
<button id="smaller">Smaller</button>
<button id="filled">Filled</button>
<button id="empty">Empty</button>

<hr>

<button id="moveRight1"><==</button>
<button id="moveLeft1">==></button>
<button id="bigger1">Bigger</button>
<button id="smaller1">Smaller</button>
<button id="filled1">Filled</button>
<button id="empty1">Empty</button>

＆＃13;

Answer 2

两个对象的x坐标相同，因此它们相互重叠

 var object = {
        height: 50,
        width: 50,
        x: 100,
        y: 50, 
        filled: false       
} 
var object2 = {
        height: 50,
        width: 50,
        x: 100, //this should be different
        y: 50, 
        filled: false       
    }

另一个更正是“renderObject2（）”函数。你在使用“object”而不是“object2”

Javascript：如何绘制两个可以通过按钮

2 个答案: