显示不正确,请问哪里有问题?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="digit.js"></script>
<title>Document</title>
</head>
<body>
<canvas id="box"> 你的浏览器不支持canvas,请升级你的浏览器</canvas>
<script>
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_LEFT=60;
var MARGIN_TOP=30;
window.onload = function () {
var canvas = document.getElementById('box');
var context = canvas.getContext('2d');
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
render(context);
}
//绘制画布
function render(cxt) {
var hours = 12;
var minutes = 34;
var seconds = 56;
//从什么位置开始(0.0),获取十位数字(parseInt(hours/10))cxt:上下文绘图环境
renderDigit(MARGIN_LEFT,MARGIN_TOP, parseInt(hours / 10), cxt);
renderDigit(MARGIN_LEFT+15*(RADIUS + 1),MARGIN_TOP, parseInt(hours % 10), cxt);
renderDigit(MARGIN_LEFT+30*(RADIUS + 1),MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+39*(RADIUS + 1),MARGIN_TOP, parseInt(minutes / 10), cxt);
renderDigit(MARGIN_LEFT+54*(RADIUS + 1),MARGIN_TOP, parseInt(minutes % 10), cxt);
renderDigit(MARGIN_LEFT+69*(RADIUS + 1),MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+78*(RADIUS + 1),MARGIN_TOP, parseInt(seconds / 10), cxt);
renderDigit(MARGIN_LEFT+93*(RADIUS + 1),MARGIN_TOP, parseInt(seconds % 10), cxt);
}
function renderDigit(x, y, num, cxt) {
cxt.fillStyle = 'rgb(0,102,153)';
for (var i = 0; i < digit[num].length; i++)
for (var j = 0; j < digit[num][i].length; j++)
//如果二维数组数字为1,就在1的地方绘制一个小圆
if (digit[num][i][j] == 1) {
cxt.beginPath();
cxt.arc(x + j * 2*(RADIUS + 1) + (RADIUS + 1), y + j * 2*(RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
cxt.closePath();
cxt.fill();
}
}
</script>
</body>
</html>