我的只有矩形的邊框啊。求解。
我看老師有兩個(gè)js文件，但是只操作了其中一個(gè)，另一個(gè)是什么樣的啊？我照著老師寫的代碼，瀏覽器也是可以的，為什么就是顯示不出來園啊。好憂傷。。。
boysheep
2016-12-07
3 回答
舉報(bào)
0/150
提交
取消
2016-12-08
希望能夠解決你的問題。
2016-12-08
這個(gè)是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文件里的代碼，有些沒有寫全，但是理想狀態(tài)至少大體形狀也會(huì)出來：
<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>
2016-12-08
沒有呀，就只有一個(gè)js文件，你發(fā)一下你的代碼