求大神赐教

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

慕仙7193819

2017-10-25 18:23

为什么一模一样的代码,我自己敲一遍,就运行不出来相同的效果?

var WINDOW_WIDTH=1024;

var WINDOW_HEIGHT=768;

var WINDOW_TOP=60;

var WINDOW_LEFT=30;

var RADIUS=10;

 

window.onload = function () {

    var canvas=document.getElementsById('canvas');    //调用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(WINDOW_LEFT,WINDOW_TOP,parseInt(hours/10),cxt);  //将数拆开,一个数一个数的绘制

    renderDigit(WINDOW_LEFT+15*(RADIUS+1),WINDOW_TOP,parseInt(hours%10),cxt);

    renderDigit(WINDOW_LEFT+30*(RADIUS+1),WINDOW_TOP,10,cxt);

    renderDigit(WINDOW_LEFT+39*(RADIUS+1),WINDOW_TOP,parseInt(minutes/10),cxt);

    renderDigit(WINDOW_LEFT+54*(RADIUS+1),WINDOW_TOP,parseInt(minutes%10),cxt);

    renderDigit(WINDOW_LEFT+69*(RADIUS+1),WINDOW_TOP,10,cxt);

    renderDigit(WINDOW_LEFT+78*(RADIUS+1),WINDOW_TOP,parseInt(seconds/10),cxt);

    renderDigit(WINDOW_LEFT+93*(RADIUS+1),WINDOW_TOP,parseInt(seconds%10),cxt);

}

 

function renderDigit(x,y,num,cxt){

    cxt.fillStyle="rag(0,102,153)";

   

    for(var i=0;i<digit[num].length;i++)   //i代表行,j代表列,num代表数,.length代表方法

        for(var j=0;j<digit[num][i].length;j++)     //1是矩阵里的,代表绘制小球

        {

            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回答

  • 孙大梅其实不叫孙大梅3944196
    2017-10-26 16:00:49
    已采纳

    不是大神。。复制到本地f12马上就知道错误了。。第7行 document.getElementsById('canvas'); 应该是 document.getElementById('canvas');

    学会调试~~


    慕仙7193...

    谢谢,已经解决了。正在慢慢学着调试

    2017-11-22 22:49:01

    共 1 条回复 >

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

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

96746 学习 · 1000 问题

查看课程

相似问题