我的只有矩形的边框啊。求解。
我看老师有两个js文件，但是只操作了其中一个，另一个是什么样的啊？我照着老师写的代码，浏览器也是可以的，为什么就是显示不出来园啊。好忧伤。。。
boysheep
2016-12-07
3 回答
这个是html文件里的代码：<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>canvas clock</title>
<style type="text /css">
div{
text-align:center;
margin-top:250px;
}
#clock{
border:1px solid #ccc;
}
</style>
</head>
<body>
<div>
<canvas id="clock" height="500px" width="500px"></canvas>
</div>
<script type="text/javascript" src="clock.js"></script>
</body>
</html>
下面是js文件里的代码，有些没有写全，但是理想状态至少大体形状也会出来：
<script type="text/javascript">
var dom=document.getElementById('clock');
var ct=dom.getContect('2d');
var width=ct.canvas.width;
var height=ct.canvas.height;
var r=width/2;
function drawBackground(){
ct.translate(r,r);
ct.beginPath();
ct,arc/*画圆的方法*/(0,0,r-5,0,2 * math.pi,false);
ct.stroke();
var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
ct.font = '18px Arial';
ct.textAlign='center';
ct.txetBaseline='meddle';
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);
ct.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.cos(rad)*(r-18);
ct.beginPath();
if(i%5===0){
ct.fillstyle='#000';
ct.arc(x,y,2,0,2*math.pi,false);
}
else{
ct.fillstyle='#ccc';
ct.arc(x,y,2,0,2*math.pi,false);
}
ct.fill();
}
}
drawBackground();
</script>
举报
0/150
提交
取消
