canvas：動態時鐘
此時針是以畫布的中心為圓心；
ctx.translate(width/2,width/2);
此函式是將畫布的原點移到(width/2,width/2)
數字的位置我們利用了三角函式的原理
x=rcosα；
y=rsinα；
α = 2 * π * i * 30 / 360；
利用取餘把12,3,6,9的樣式改變
var arr = [3,4,5,6,7,8,9,10,11,12,1,2]; var x=0, y=0; var rad = 0; for (var i=0;i<arr.length;i++) { rad = 2*Math.PI*i*30/360; x=Math.cos(rad)*(r-30); y=Math.sin(rad)*(r-30); if (i%3==0) { ctx.font = "20px 微軟雅黑" ctx.fillStyle = "black" }else{ ctx.font = "16px 微軟雅黑" ctx.fillStyle = "#CCCCCC" } ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(arr[i],x,y); }
然後是錶盤的秒針刻度
和錶盤數字大同小異。
一定要加beginPath，免得被其他函式影響，在這裡不加，所有點會連在一起
for (var j=0;j<60;j++) { ctx.beginPath(); rad = 2*Math.PI*j*6/360; x=Math.cos(rad)*(r-15); y=Math.sin(rad)*(r-15); ctx.lineWidth = "1"; if (j%5==0) { ctx.fillStyle = "black" }else{ ctx.fillStyle = "#CCCCCC" } ctx.arc(x,y,2,0,2*Math.PI,false); ctx.fill(); }
時針
save和restore必不可少，在這兩個函式之間，改變位置不會影響到其他函式，在此段程式碼中特指rotate，如果沒有rotate，可以不用save和restore
一定要加beginPath，免得被其他函式影響
時針和分針秒針不一樣，一個30°，還有分針的移動會影響時針的位置
時針運動的原理是畫好一條線，然後旋轉那條線
function drawHours(h,m){ ctx.save() ctx.beginPath(); var rad = 2*Math.PI*(h*30+m/2)/360; ctx.rotate(rad); ctx.lineWidth = "8" ctx.strokeStyle = "black" ctx.lineCap = "round"; ctx.moveTo(0,15); ctx.lineTo(0,-r+100); ctx.stroke(); ctx.restore(); }
分針
function drawMinutes(m){ ctx.save() ctx.beginPath(); var rad = 2*Math.PI*m/60; ctx.rotate(rad); ctx.lineWidth = "6" ctx.strokeStyle = "black" ctx.lineCap = "round"; ctx.moveTo(0,20); ctx.lineTo(0,-r+80); ctx.stroke(); ctx.restore(); }
秒針
function drawSecond(s){ ctx.save() ctx.beginPath(); var rad = 2*Math.PI*s/60; ctx.rotate(rad); ctx.lineWidth = "5" ctx.strokeStyle = "red" ctx.moveTo(0,30); ctx.lineTo(0,-r+40); ctx.stroke(); ctx.restore(); }
點
function drawdot(){ ctx.beginPath(); ctx.fillStyle = "honeydew" ctx.arc(0,0,4,0,2*Math.PI,false); ctx.fill(); }
還添加了線性漸變，
var grd = ctx.createLinearGradient(-250,-250,250,250)
var r1 = Math.floor(Math.random()*256);
var g1 = Math.floor(Math.random()*256);
var b1 = Math.floor(Math.random()*256);
var r2 = Math.floor(Math.random()*256);
var g2 = Math.floor(Math.random()*256);
var b2 = Math.floor(Math.random()*256);
grd.addColorStop(0,"rgb(" + r1 + "," + g1 + "," + b1 + ")");
grd.addColorStop(1,"rgb(" + r2 + "," + g2 + "," + b2 + ")");
相當於新增一個調色容納器
ctx.strokeStyle = grd;
然後賦值給strokestyle
下面附上整段程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="" width="500" height="500"></canvas>
<script type="text/javascript">
var ocanvas = document.getElementsByTagName("canvas")[0];
var ctx = ocanvas.getContext("2d");
var width = ocanvas.width;
var height = ocanvas.height;
var r = width/2;
ctx.translate(width/2,width/2);
var grd = ctx.createLinearGradient(-250,-250,250,250)
var timer = setInterval(function(){
ctx.clearRect(-250,-250,500,500);
setTime();
},1000)
function setTime(){
var timet = new Date();
var h = timet.getHours();
var m = timet.getMinutes();
var s = timet.getSeconds();
ctx.beginPath();
ctx.lineWidth = "10"
ctx.arc(0,0,width/2-5,0,2*Math.PI,false);
var r1 = Math.floor(Math.random()*256);
var g1 = Math.floor(Math.random()*256);
var b1 = Math.floor(Math.random()*256);
var r2 = Math.floor(Math.random()*256);
var g2 = Math.floor(Math.random()*256);
var b2 = Math.floor(Math.random()*256);
grd.addColorStop(0,"rgb(" + r1 + "," + g1 + "," + b1 + ")");
grd.addColorStop(1,"rgb(" + r2 + "," + g2 + "," + b2 + ")");
ctx.strokeStyle = grd;
ctx.stroke();
var arr = [3,4,5,6,7,8,9,10,11,12,1,2];
var x=0,
y=0;
var rad = 0;
for (var i=0;i<arr.length;i++) {
rad = 2*Math.PI*i*30/360;
x=Math.cos(rad)*(r-30);
y=Math.sin(rad)*(r-30);
if (i%3==0) {
ctx.font = "20px 微軟雅黑"
ctx.fillStyle = "black"
}else{
ctx.font = "16px 微軟雅黑"
ctx.fillStyle = "#CCCCCC"
}
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(arr[i],x,y);
}
for (var j=0;j<60;j++) {
ctx.beginPath();
rad = 2*Math.PI*j*6/360;
x=Math.cos(rad)*(r-15);
y=Math.sin(rad)*(r-15);
ctx.lineWidth = "1";
if (j%5==0) {
ctx.fillStyle = "black"
}else{
ctx.fillStyle = "#CCCCCC"
}
ctx.arc(x,y,2,0,2*Math.PI,false);
ctx.fill();
}
drawHours(h,m);
drawMinutes(m);
drawSecond(s);
drawdot();
}
function drawHours(h,m){
ctx.save()
ctx.beginPath();
var rad = 2*Math.PI*(h*30+m/2)/360;
ctx.rotate(rad);
ctx.lineWidth = "8"
ctx.strokeStyle = "black"
ctx.lineCap = "round";
ctx.moveTo(0,15);
ctx.lineTo(0,-r+100);
ctx.stroke();
ctx.restore();
}
function drawMinutes(m){
ctx.save()
ctx.beginPath();
var rad = 2*Math.PI*m/60;
ctx.rotate(rad);
ctx.lineWidth = "6"
ctx.strokeStyle = "black"
ctx.lineCap = "round";
ctx.moveTo(0,20);
ctx.lineTo(0,-r+80);
ctx.stroke();
ctx.restore();
}
function drawSecond(s){
ctx.save()
ctx.beginPath();
var rad = 2*Math.PI*s/60;
ctx.rotate(rad);
ctx.lineWidth = "5"
ctx.strokeStyle = "red"
ctx.moveTo(0,30);
ctx.lineTo(0,-r+40);
ctx.stroke();
ctx.restore();
}
function drawdot(){
ctx.beginPath();
ctx.fillStyle = "honeydew"
ctx.arc(0,0,4,0,2*Math.PI,false);
ctx.fill();
}
</script>
</body>
</html>
效果如下：
