參考來源 https://sn-y.blogspot.com/2020/07/javascript-clock-canvas.html
Node-RED程式
[{"id":"de89681f.077258","type":"template","z":"238f667d.caf91a","name":"html5","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n</head>\n<body>\n<canvas id = \"c4\" width = \"500px\" height = \"450px\" style = \"position: absolute;\"></canvas>\n<canvas id = \"c4a\" width = \"500px\" height = \"450px\" style = \"position: absolute;\"></canvas>\n<script>\nvar clocklinerw = 200;\nvar gethour = new Date() . getHours (); //取得現在時間Hours\nvar getminu = new Date() . getMinutes (); //取得現在時間Minutes\nvar timecount = 0; //秒針counter\nvar xz4 = 1.5;\nvar xz3 = 1.5;\nvar getminu2 = (getminu * 0.0333333333) + 1.5;\nif (getminu2 >= 2) {xz3 = getminu2 - 2;}\nelse {xz3 = getminu2;}\nvar xz1 = 1.5;\n\n/* 時間取得24 => 12再劃分720小步 */\nif (gethour <= 12) {gethour = gethour}\nelse {gethour = gethour - 12}\nvar gethour2 = ((gethour * 60 + getminu) * 0.00277777778) + 1.5;\nif (gethour2 >= 2) {xz1 = gethour2 - 2;}\nelse {xz1 = gethour2;}\nvar clockcount4 = c4 . getContext (\"2d\");\n\nfunction clockRun4 () {\n/* 秒針 */\nclockcount4 . beginPath ();\nclockcount4 . clearRect (0, 0, 450, 450)\nclockcount4 . strokeStyle = \"red\";\nclockcount4 . lineWidth = 2;\nclockcount4 . arc (250, 220, clocklinerw * 0.9, (xz4) * Math.PI, xz4 * Math.PI);\nclockcount4 . arc (250, 220, 0, 0, 0);\nclockcount4 . stroke ();\nxz4 += 0.0333333333;\ntimecount += 1;\nif (xz4 >= 2) {xz4 = 0.0333333333;}\nif (timecount == 61) {timecount = 1; xz3 += 0.0333333333; xz1 += 0.00277777778;}\nclockcount4 . closePath ();\n\n/* 分針 */\nclockcount4 . beginPath ();\nclockcount4 . strokeStyle = \"blue\";\nclockcount4 . lineWidth = 4;\nclockcount4 . arc (250, 220, clocklinerw * 0.8, (xz3) * Math.PI, xz3 * Math.PI);\nclockcount4 . arc (250, 220, 0, 0, 0);\nclockcount4 . stroke ();\nclockcount4 . closePath ();\nif (xz3 >= 2) {xz3 = 0.0333333333;}\n\n/* 時針 */\nclockcount4 . beginPath ();\nclockcount4 . strokeStyle = \"green\";\nclockcount4 . lineWidth = 7;\nclockcount4 . arc (250, 220, clocklinerw * 0.6, (xz1) * Math.PI, xz1 * Math.PI);\nclockcount4 . arc (250, 220, 0, 0, 0);\nclockcount4 . stroke ();\nclockcount4 . closePath ();\nif (xz1 >= 2) {xz1 = 0.00277777778;}\nclockcount4 . closePath ();\n}\nsetInterval (clockRun4, 1000); //每間隔1秒執行函式\nclockRun4 ();\n\n/* 以下為時鐘表面製作 */\nvar clockcount4a = c4a . getContext (\"2d\");\nclockcount4a . strokeStyle = \"black\";\nclockcount4a . lineWidth = 23;\nfor (var pat = 0; pat <= 2; pat += 0.166666667) {\npat1 = pat + 0.006;\nclockcount4a . beginPath ();\nclockcount4a . arc (250, 220, clocklinerw, pat * Math.PI, pat1 * Math.PI);\nclockcount4a . stroke ();\n}\nclockcount4a . closePath ();\nclockcount4a . strokeStyle = \"violet\";\nclockcount4a . lineWidth = 7;\nfor (var pat = 0; pat <= 2; pat += 0.166666667) {\npat1 = pat + 0.02;\nclockcount4a . arc (250, 220, clocklinerw, pat * Math.PI, pat1 * Math.PI);\nclockcount4a . stroke ();\n}\n</script>\n</body>\n</html>\n","x":290,"y":520,"wires":[["bffdb477.f44c68"]]},{"id":"5aaebb5f.e3aa74","type":"http in","z":"238f667d.caf91a","name":"","url":"/index","method":"get","swaggerDoc":"","x":140,"y":520,"wires":[["de89681f.077258"]]},{"id":"bffdb477.f44c68","type":"http response","z":"238f667d.caf91a","name":"","x":430,"y":520,"wires":[]}]
沒有留言:
張貼留言