Javascript 七段显示器不亮或不响应事件点击

Question

我是编码新手，谁能告诉我我的代码有什么问题？ 这可能是我在代码中犯的一些错误，但我已经尝试了几个小时，任何帮助将不胜感激！

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

/**
* Construct(x, y) Coordinate object representing a point on a 2D plane
*/
function Coord2D(x_ordinate, y_ordinate) {
 return {
 x : x_ordinate,
 y : y_ordinate
 };
}
theCanvas.center = new Coord2D(theCanvas.width/2, theCanvas.height/2);
var SEGMENT_LENGTH = 150;
var SEGMENT_BREADTH = 20;
var LEFT_X = theCanvas.center.x - SEGMENT_LENGTH/2;
var TOP_Y = theCanvas.center.y - SEGMENT_LENGTH/2 - SEGMENT_BREADTH;
var RIGHT_X = theCanvas.center.x + SEGMENT_LENGTH/2 - SEGMENT_BREADTH;
var BOTTOM_Y = theCanvas.center.y + SEGMENT_LENGTH/2 + SEGMENT_BREADTH;
var MIDBOT_Y = theCanvas.center.y - SEGMENT_BREADTH - SEGMENT_BREADTH;
var MID_Y = theCanvas.center.y ;
// A 2D Segment object: a rectangle representing one display segment
function Segment(x, y, isVertical) {
var segment = {
coord : new Coord2D(x, y),
width : SEGMENT_LENGTH,
height: SEGMENT_BREADTH,
isOn : false
};
if (isVertical) {
segment.width = SEGMENT_BREADTH;
segment.height = SEGMENT_LENGTH;
};
return segment;
}; 

function drawSegment(segment) {
c.fillStyle = 'lightgrey';
if (segment.isOn) {
c.fillStyle = 'red';
}
c.fillRect(segment.coord.x, segment.coord.y,
segment.width, segment.height);
};

var SevenSegDisplay = [
new Segment(LEFT_X, TOP_Y, false), //top segment A
new Segment(RIGHT_X, TOP_Y, true),  //right top vert segment B
new Segment(LEFT_X, MIDBOT_Y, true),  //left bot vert segment C
new Segment(LEFT_X, BOTTOM_Y, false),//bottom segment D
new Segment(RIGHT_X, MIDBOT_Y, true), //right bot vert segment E
new Segment(LEFT_X, TOP_Y, true),//left top vert segment F
new Segment(LEFT_X, MID_Y, false),//middle segment G
];

function drawSevenSegDisplay (key) {
    for(i=0;i<SevenSegDisplay.length;i++){
drawSegment(SevenSegDisplay[i]);
}if(SWITCH_ENCODING.hasOwnProperty(key)){
    var switches = SWITCH_ENCODING[key];
};
};
var ON = true;
var OFF = false;
// Map event.key onto an encoding of the switch state for each segment
var SWITCH_ENCODING = {
'Off' : [OFF,OFF,OFF,OFF,OFF,OFF,OFF],
'0' : [ ON, ON, ON, ON, ON, ON,OFF],
'1' : [ OFF, ON, ON, OFF, OFF, OFF,OFF],
'2' : [ ON, ON, OFF, ON, ON, OFF,ON],
'3' : [ ON, ON, ON, ON, OFF, OFF,ON],
'4' : [ OFF, ON, OFF, OFF, ON, ON,OFF],
'5' : [ ON, OFF, ON, ON, OFF, ON,ON],
'6' : [ ON, OFF, ON, ON, ON, ON,ON],
'7' : [ ON, ON, ON, OFF, OFF, OFF,OFF],
'8' : [ ON, ON, ON, ON, ON, ON,ON],
'9' : [ ON, ON, ON, OFF, OFF, ON,ON],}
document.onkeydown = drawSevenSegDisplay(Event.key);

Answer 1

看起来您必须以不同的方式附加事件侦听器：

document.onkeydown = drawSevenSegDisplay(Event.key);

应该是： document.onkeydown = function(Event) { drawSevenSegDisplay(Event.key) };

此外，看起来drawSevenSegDisplay确实绘制了初始显示，但之后不会更新它。 您需要为每个数字创建一个新的 Segment 数组 - 例如，0 将是：

[
    new Segment(LEFT_X, TOP_Y, false), //top segment A
    new Segment(RIGHT_X, TOP_Y, true),  //right top vert segment B
    new Segment(LEFT_X, MIDBOT_Y, true),  //left bot vert segment C
    new Segment(LEFT_X, BOTTOM_Y, false),//bottom segment D
    new Segment(RIGHT_X, MIDBOT_Y, true), //right bot vert segment E
    new Segment(LEFT_X, TOP_Y, true),//left top vert segment F
];

1 将是：

[
    new Segment(RIGHT_X, TOP_Y, true),  //right top vert segment B
    new Segment(RIGHT_X, MIDBOT_Y, true), //right bot vert segment E
];

其余部分依此类推。 然后，在 for 循环中，您可以迭代与每个段的适当数字对应的数组，而不是迭代SevenSegDisplay数组。 如果您好奇，这里有一个简单的七段显示器示例。

 // segments from top->bottom left->right // // _0_ // | | // 1 2 // |_3_| // | | // 4 5 // |_6_| var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var segmentDefinitions = [ // this was simply easier to type [0, 1, 2, 4, 5, 6], // 0 [2, 5], // 1 [0, 2, 3, 4, 6], // 2 [0, 2, 3, 5, 6], // 3 [1, 2, 3, 5], // 4 [0, 1, 3, 5, 6], // 5 [0, 1, 3, 4, 5, 6], // 6 [0, 2, 5], // 7 [0, 1, 2, 3, 4, 5, 6], // 8 [0, 1, 2, 3, 5, 6], // 9 ]; // onkeydown expects a callback function window.onkeydown = function(event) { var key = +event.key; // parse the key as a number if (key >=0 && key <= 9) drawNumber(key); } // fills the canvas with a white rectangle function clearCanvas() { context.fillStyle = 'white'; context.fillRect(0, 0, canvas.width, canvas.height); } // draws a number onto the canvas function drawNumber(number) { clearCanvas(); segmentDefinitions[number].forEach(drawSegment) } // draws a specific segment onto the canvas function drawSegment(id) { var width = canvas.width; var height = canvas.height; var borderWidth = 20; context.fillStyle = 'red'; switch(id) { case 0: context.fillRect( 0, 0, width, borderWidth); break; case 1: context.fillRect( 0, 0, borderWidth, height / 2); break; case 2: context.fillRect( width - borderWidth, 0, borderWidth, height/2); break; case 3: context.fillRect( 0, height / 2, width, borderWidth); break; case 4: context.fillRect( 0, height / 2, borderWidth, height/2); break; case 5: context.fillRect( width - borderWidth, height / 2, borderWidth, height/2); break; case 6: context.fillRect( 0, height - borderWidth, width, borderWidth); break; } }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Seven Segment Display</title> <canvas id="canvas" width="80" height="160"></canvas> <h4>Click within this area to begin interacting with the canvas</h4> </head> <body> </body> </html>