原生JS的<canvas>標簽畫時鐘
阿新 • • 發佈：2019-03-25
什麽 lock 坐標 clas width 設置 true drawing 指定
y：縱坐標； radius：半徑； startAngle：Math.PI / 180 這個在數學上表示1度，這邊需要用圓弧表示，所以需要多少就寫多少。表示弧線開始的角度。 endAngle：同理，表示弧線結束的角度。 anticlockwise：是否逆時針，true：逆時針，false：順時針。 2、context.moveTo(x, y):將起畫坐標移動到某個坐標上。如果不指定則從當前位置開始畫。 3、context.translate(x, y)：將(x, y)這個坐標設置成(0,0)；
首先要申明本人對於美除了美女真沒什麽要求。
其次講講次學習碰到重要知識點：
1、畫圓（弧）：
context.arc(x, y, radius, Math.PI / 180 * startAngle, Math.PI / 180 * endAngle, anticlockwise); x:橫坐標；y：縱坐標； radius：半徑； startAngle：Math.PI / 180 這個在數學上表示1度，這邊需要用圓弧表示，所以需要多少就寫多少。表示弧線開始的角度。 endAngle：同理，表示弧線結束的角度。 anticlockwise：是否逆時針，true：逆時針，false：順時針。 2、context.moveTo(x, y):將起畫坐標移動到某個坐標上。如果不指定則從當前位置開始畫。 3、context.translate(x, y)：將(x, y)這個坐標設置成(0,0)；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Refresh" content="1" />
<title>canvas draw clcok</title>
<script>
window.onload = function(){
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");
console.log(context);
//邊框顏色
context.fillStyle = "#999";
//填充色 字體顏色
context.strokeStyle = "#999";
//畫圓心黑點
context.beginPath();
context.arc(100, 100, 5, 0, 2*Math.PI, false);
context.fill();
context.closePath();
context.beginPath();
context.arc(100, 100, 99, 0, 2*Math.PI, false);
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2*Math.PI, false);
context.font=‘bold 16px sans-serif‘;
context.textAlign=‘center‘;
context.textBaseline=‘middle‘;
context.fillText("1", 145, 30);
context.fillText("2", 170, 60);
context.fillText("3", 185, 100);
context.fillText("4", 170, 140);
context.fillText("5", 145, 170);
context.fillText("6", 100, 185);
context.fillText("7", 55, 170);
context.fillText("8", 30, 140);
context.fillText("9", 15, 100);
context.fillText("10", 30, 60);
context.fillText("11", 55, 30);
context.fillText("12", 100, 15);
context.closePath();
var nowDate = new Date();
var hours = nowDate.getHours();
if(hours > 12){
hours = hours - 12;
}
var mins = nowDate.getMinutes();
var seconds = nowDate.getSeconds();
console.log("hours : " + hours + ",mins : " + mins + ",seconds : " + seconds)
context.translate(100, 100);
context.moveTo(0, 0);
context.save(); //用於保存context的設置和變換，可以保存多個通過restore方法返回。
// 時針
context.restore();
context.save();
context.rotate(Math.PI / 180 * 6 * hours );
context.lineTo(0, -50);
// 分針、
context.restore();
context.save();
context.moveTo(0, 0);
context.rotate(Math.PI / 180 * 6 * mins);
context.lineTo(0, -60);
// 秒針、
context.restore();
context.moveTo(0, 0);
context.rotate(Math.PI / 180 * 6 * seconds);
context.lineTo(0, -70);
context.stroke();
}
}
</script>
</head>
<body>
<h2 style="text-align: center;color:#007ACC">clcok</h2>
<div>
<canvas id="drawing" width="500px" height="500px">
</canvas>
</div>
</body>
</html>
原生JS的<canvas>標簽畫時鐘