问答详情
源自:3-2 倒计时数字钟的具体绘制

为什么不显示数字啊???

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;

window.onload = function() {
	var c = document.getElementById("canvas");
	var ctx = c.getContext('2d');
	ctx.width = WINDOW_WIDTH;
	ctx.height = WINDOW_HEIGHT;
	render(ctx);

	function render(ctx) {
		var hours = 12;
		var minutes = 34;
		var seconds = 56;

		renderDigit(0, 0, parseInt(hours / 10), ctx);
	}

	function renderDigit(x, y, num, ctx) {
		ctx.fillStyle = "red";
		for (var i = 0; i < digit[num].length; i++) {
			for (var j = 0; j < digit[num][i]; j++) {
				if (digit[num][i][j] == 1) {
					ctx.beginPath();
					ctx.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + (i + 1) * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
					ctx.closePath();
					ctx.fill();
				}
			}
		}
	}
}


提问者:Betsey 2016-03-04 15:13

个回答

  • AndersonKim
    2016-03-04 16:08:51

    1. 检查一下你的同级目录下有没有digit.js文件

    2. 第8.9行的ctx改成c你在这里设置的是canves的属性不是上下文的属性

    3. 遵守函数封装的规则,把每个函数拆出来

    • function XXX(){

    • //TODO

    • }

    26行的context.arc()方法的使用错误参见其实你可以自己给自己解释代码来检查代码~~~


    其他的没什么大问题了,祝好