<!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>
cxt.stroke() 不需要把
cxt.fill()和cxt.stroke();
不用cxt.fill();
cxt.stroke()后closePath()