canvas時(shí)鐘
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas時(shí)鐘</title>
<Script type="text/javaScrpt">
</script>
<style type="text/css">
? div{
?text-align:center;
?margin-top:150px;
?}
?#clock{
?border:1px solid #CCC;
?}
</style>
</head>
<body>
? ? ?<div>
? ? ? ? ?<canvas id="clock" height="200px" width="200px"></canvas>
? ? ?</div>
<script type="text/javaScrpt" src="JavaScript/clock.js"></script>
</body>
</html>
不考慮js的代碼，這樣寫對(duì)不對(duì)。我在瀏覽器上只顯示個(gè)框
2017-01-17
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(){ ? ?//外圈設(shè)置
ctx.translate(r,r); ?//重新映射畫布上的（0,0）位置
ctx.beginPath(); //起始一條路徑，或當(dāng)前路徑
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]; ? //數(shù)字顯示
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
hourNumbers.forEach(function(number,i){
var rad = 2*Math.PI/12*i; ?//每個(gè)小時(shí)數(shù)的弧度乘索引
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); ?//大一點(diǎn)
? ? ? ? ctx.beginPath();
if(i%5===0){ ? //5個(gè)點(diǎn)的時(shí)候是黑色
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'; ?//時(shí)針線末端的樣式
ctx.moveTo(0,10); ?//時(shí)針線的長(zhǎng)度
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'; ?//時(shí)針線末端的樣式
ctx.moveTo(0,10); ?//時(shí)針線的長(zhǎng)度
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); ?//時(shí)針線的長(zhǎng)度
ctx.lineTo(2,20);
ctx.lineTo(1,-r+18);
ctx.lineTo(-1,-r+18);
ctx.fill();
ctx.restore(); ?//返回之前保存過的路徑
}
function drawDot(){ ? ?//圓點(diǎn)
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0,0,3,0,2*Math.PI,flase);
ctx.fill();
}
drawBackground();
drawHour(4,30); //例如4小時(shí)的位置
drawMinute(30);
drawSecond(15);
drawDot();
2017-01-17
可是我有設(shè)置js，還是不出來
2017-01-17
相當(dāng)于就是一個(gè)元素而已，沒有特別的樣式
2017-01-17
對(duì)的，沒設(shè)置js只會(huì)顯示一個(gè)畫布