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 确实绘制了初始显示，但之后不更新它。您需要为每个数字创建一个新的段数组 - 例如，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>