为什么我的一片空白

来源:3-2 倒计时数字钟的具体绘制

大魔王阳哥

2019-09-06 08:56

var WINDOW_WIDTH=1024
var WINDOW_HEIGHT=768
var RADIUS=8
var MARGIN_TOP=60
var MARGIN_LEFT=30
window.onload=function() {


    var canvas = document.getElementById('canvas');
    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

renderDigit(MARGIN_LEFT,MARGIN_TOP,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 rendeiDigitf( 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++){
            if(digit[num][i][j]==1) {

                cxt.beginPath();
                cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1),RADIUS,0,2 * Math.PI
            )
                cxt.closePath()

                cxt.fill()

            }
            }


}


写回答 关注

1回答

  • 嗨刘刘_
    2019-09-20 10:37:02
    函数renderDigit函数命名错误

    很多语句未加" ; "符号

    花括号圆括号写错

    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);多写

    var WINDOW_WIDTH = 1024;

    var WINDOW_HEIGHT = 768;

    var RADIUS = 8;

    var MARGIN_TOP = 60;

    var MARGIN_LEFT = 30;

    window.onload = function () {



        var canvas = document.getElementById('canvas');

        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;


        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++) {

                if (digit[num][i][j] == 1) {


                    cxt.beginPath();

                    cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);

                    cxt.closePath();

                    cxt.fill();

                }

            }

    }


    嗨刘刘_

    还有标点符号中英文混淆。。

    2019-09-20 10:37:39

    共 1 条回复 >

炫丽的倒计时效果Canvas绘图与动画基础

学习HTML5中最激动人心的技术Canvas,彻底释放自己的创造力

96746 学习 · 1000 问题

查看课程

相似问题