原生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);
4、context.save():用於保存context的設置和變換,可以保存多個通過restore方法返回。可多次調用。
5、context.restore():用戶獲取保存的context設置和變換,可多次調用。
直接上代碼了:
首先要申明本人對於美除了美女真沒什麽要求。
其次講講次學習碰到重要知識點:
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>標簽畫時鐘