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

跟着老师没出数字点阵图？

<body>

<canvas id="canvas" style="display:block;margin:50px auto;">


</canvas>


<script src="digit.js"></script>

<script src="countdown.js"></script>



</body>


//js部分

// JavaScript Document

var window_width=1024;

var window_height=768;

var radius=8;


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(0,0,parseInt(hours/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]==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();

}

}


提问者：fel 2016-07-21 20:29

个回答

  • laxy
    2016-07-21 22:39:04
    已采纳

    http://img.mukewang.com/5790de250001557812050768.jpg

    看我发的截图。第30行，判断条件里面数字的坐标你没写对，这是个三维数组。

    0
  • 慕丝1033313
    2018-03-02 23:13:55

    var window_width=1024;

    var window_height=768;


    var radius=8;


    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 seconnds=56;

    //绘制1个数字的所有信息 开始绘制的位置（x,y），要绘制的数字，(两位数字)，绘图环境

    renderDigit(50,50,parseInt(hours/10),cxt);

    }


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

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

    for(var i=0; i<digit[num].length; i++){

    for(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();

    }

    }

    }

    }


    0