var dom = document.getElementById('clock');

var ctx = dom.getContext('2d');

var width = ctx.canvas.width;

var height = ctx.canvas.height;

var r = width/2;

function drawBackground(){    //外圈设置

ctx.translate(r,r);  //重新映射画布上的（0,0）位置

ctx.beginPath(); //起始一条路径，或当前路径

ctx.lineWidth=10;  

ctx.arc(0,0,r-5,2*Math.PI,false);

ctx.stroke();   //绘制已定路线

var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];   //数字显示

ctx.font = '18px Arial';

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

hourNumbers.forEach(function(number,i){

var rad = 2*Math.PI/12*i;  //每个小时数的弧度乘索引

var x = Math.cos(rad)*(r-30);

var y = Math.sin(rad)*(r-30);

ctx.fillText(number,x,y);

});

for(var i=0;i<60;i++){

var rad = 2*Math.PI/60*i; 

var x = Math.cos(rad)*(r-18);

var y = Math.sin(rad)*(r-18);  //大一点

        ctx.beginPath();

if(i%5===0){   //5个点的时候是黑色

ctx.arc(x,y,2*Math.PI,false);

}else{

ctx.fillStyle = '#ccc';

ctx.arc(x,y,2*Math.PI,false);

}

ctx.fill();

}

}

function drawHour(hour){

ctx.save();

ctx.beginPath();

var rad = 2*Math.PI/12*hour;

var mrad = 2*Math.PI/12/60*minute;

ctx.rotate(rad + mrad);

ctx.lineWidth=6;

ctx.lineCap = 'round';  //时针线末端的样式

ctx.moveTo(0,10);  //时针线的长度

ctx.lineTo(0,-r/2);

ctx.stroke();

}

function drawMinute(minute){

ctx.save();

ctx.beginPath();

var rad = 2*Math.PI/60*minute;

ctx.lineWidth=3;

ctx.lineCap = 'round';  //时针线末端的样式

ctx.moveTo(0,10);  //时针线的长度

ctx.lineTo(0,-r+30);

ctx.stroke();

ctx.restore();  //返回之前保存过的路径

}

function drawSecond(second){

ctx.save();

ctx.beginPath();

ctx.fillStyle = '#c14543';

var rad = 2*Math.PI/60*second;

ctx.lineWidth=3;

    ctx.moveTo(-2,20);  //时针线的长度

ctx.lineTo(2,20);

ctx.lineTo(1,-r+18);

ctx.lineTo(-1,-r+18);

ctx.fill();

ctx.restore();  //返回之前保存过的路径

}

function drawDot(){    //圆点

ctx.beginPath();

ctx.fillStyle = '#fff';

ctx.arc(0,0,3,0,2*Math.PI,flase);

ctx.fill();

}

drawBackground();

drawHour(4,30); //例如4小时的位置

drawMinute(30);

drawSecond(15);

drawDot();

可是我有设置js，还是不出来

相当于就是一个元素而已，没有特别的样式

对的，没设置js只会显示一个画布