java ee 左边框消失_边框消失了

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

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

var width=ctx.canvas.width;

var height=ctx.canvas.height;

var r = width/2;

var rem=width/200;

function drawBackground(){

ctx.save();

ctx.translate(r,r);

ctx.beginPath();

ctx.lineWidth=10 * rem;

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

ctx.stroke();

var hourNum=[3,4,5,6,7,8,9,10,11,12,1,2];

ctx.font=18*rem+'px Arial';

ctx.textAlign='center';

ctx.textBaseline='middle';

hourNum.forEach(function(number,i){

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

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

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

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*rem);

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

ctx.beginPath();

if(i%5===0){

ctx.fillStyle='#000';

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

}else{

ctx.fillStyle='#ccc';

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

}

ctx.fill();

}

}

function drawHour(hour,minute){

ctx.save();

ctx.beginPath();

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

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

ctx.rotate(rad+minrad);

ctx.lineWidth=6*rem;

ctx.lineCap='round';

ctx.moveTo(0,10*rem);//线的起始位置  下面是线的终点

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

ctx.stroke();

ctx.restore();

}

function drawMinute(minute,second){

ctx.save();

ctx.beginPath();

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

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

ctx.rotate(rad+minrad);

ctx.lineWidth=3*rem;

ctx.lineCap='round';

ctx.moveTo(0,10*rem);

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

ctx.stroke();

ctx.restore();

}

function drawSecond(second){

ctx.save();

ctx.beginPath();

ctx.fillStyle='#c14543';

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

ctx.rotate(rad);

ctx.moveTo(-2*rem,20*rem);

ctx.lineTo(2*rem,20*rem);

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

ctx.lineTo(-1,-r+18*rem);//三个lineTo说明有三条线

ctx.fill();

ctx.restore();

}

function drawDot(){

ctx.beginPath();

ctx.fillStyle='#fff';

ctx.arc(0,0,2*rem,0,2*Math.PI,false);

ctx.fill();

}

function draw(){

ctx.clearRect(0,0,width,height);

var now=new Date();

var hour=now.getHours();

var minute=now.getMinutes();

var second=now.getSeconds();

drawBackground();

drawHour(hour,minute);

drawMinute(minute,second);

drawSecond(second);

drawDot();

ctx.restore();

}

draw();

setInterval(draw,1000);

这样哦，原因是

function drawBackground(){

ctx.save();

ctx.translate(r,r);

ctx.beginPath();

ctx.lineWidth=10 * rem;

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

ctx.stroke();

中的r-ctx.lineWidth/2写掉了r-

帮助到你了吗//