怎么什么都显示不出来啊?看了好几遍,都没找出错误在哪?

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

爱转角29363

2015-05-29 22:15

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" style="border:1px solid blue;display: block">
</canvas>
<script type="text/javascript">
    var WINDOW_WIDTH=1024;
    var WINDOW_HEIGHT=768;
    var RADIUS=8;
window.onload=function(){
    var canvas = document.getElementById("canvas");
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    var context = canvas.getContext("2d");
    render(context)
}

function render(cxt){
    //定义时钟变量
        var hours=12;
        var miniutes=24;
        var seconds=48;
    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][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();
             cxt.stroke();
         }




    }
</script>
</body>
</html>

写回答 关注

2回答

  • jerryguo
    2016-02-02 14:30:18

    cxt.stroke() 不需要把

  • ♣衣锦
    2015-05-30 23:49:22

    cxt.fill()和cxt.stroke();

    不用cxt.fill();

    cxt.stroke()后closePath()

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

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

96746 学习 · 1000 问题

查看课程

相似问题