javascript - 在 Canvas 上显示对象的框

Question

我试图在 Canvas 上画两个盒子，但我什么也看不到。有人有想法吗？

var arena = {
o1: ['gate',5,5,20,20],
o2: ['block',50,40,30,40]
};

$(document).ready(function(){
var c = document.getElementById('canvas.arena');
var canvas=c.getContext("2d");

canvas.lineWidth="6";
canvas.strokeStyle="red";

var xpercent = c.width/100;
var ypercent = c.height/100;

for (var key in arena) {
    canvas.beginPath();
    canvas.rect(arena[key][1]*xpercent, arena[key][2]*ypercent, arena[key][3]*xpercent, arena[key][4]*ypercent);
}
});

Answer 1

• 如果您的元素 ID 是 id="canvas"，则使用 getElementById("canvas")
• 使用 ctx 作为 CanvasRenderingContext 的简写(而不是 canvas)
• 使用ctx.fill()

var arena = {
  o1: ['gate', 5, 5, 20, 20],
  o2: ['block', 50, 40, 30, 40]
};

$(document).ready(function() {
  var c = document.getElementById('canvas');
  var ctx = c.getContext("2d");

  ctx.lineWidth = "6";
  ctx.strokeStyle = "red";

  var xpercent = c.width / 100;
  var ypercent = c.height / 100;

  for (var key in arena) {
    var arr = arena[key];
    ctx.beginPath();
    ctx.rect(arr[1] * xpercent, arr[2] * ypercent, arr[3] * xpercent, arr[4] * ypercent);
    ctx.fill();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>