Android Widget时钟，运行离线时钟28小时，56分钟，56秒

卧疾丰暇豫，翰墨时间作。这篇文章主要讲述Android Widget时钟，运行离线时钟28小时，56分钟，56秒相关的知识，希望能为你提供帮助。
需要帮助创建一个运行28小时，56分钟56秒的android Widget时钟。时钟需要类似于使用javascript，Canvas html5构建的时钟，如下所示。
有没有办法直接将以下javascript文件移植到Android Widget中。
这个时钟的目的是在离线模式下运行，不像时钟的HTML5 / Canvas版本。
这个时钟是作为mymoonlife.com进行的研究工作的一部分而开发的。时钟旨在用于在观看时钟时有限或无法访问互联网的人。
我们对所提供的帮助表示诚挚的谢意和亲切的问候。

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90 setInterval(drawClock, 1000); var ms_per_sec = 984; // 1000 var sec_per_min = 56; // 55.54920598892; var min_per_hr = 56; // 55.54920598892; var hrs_per_day = 28; var ms_per_secEarth = 1000; // 1000 var sec_per_minEarth = 60; // 55.54920598892; var min_per_hrEarth = 60; // 55.54920598892; var hrs_per_dayEarth = 24; // let's make our target date at some fixed distance in our own time system const countDownDate = 1555157578171; const countDownDateEarth = 1555392593171; function loop() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now and the count down date var total_ms = (countDownDate + now); // from here our values are based on our own time system var total_seconds = (total_ms / ms_per_sec); var total_minutes = (total_seconds/ sec_per_min); var total_hours = (total_minutes / min_per_hr); var total_days = (total_hours / hrs_per_day); var days = Math.floor(total_days); var hours = Math.floor(total_hours % hrs_per_day); var minutes = Math.floor(total_minutes % 112); var seconds = Math.floor(total_seconds % 112); var secondsty = Math.floor(total_seconds % 87808); // Output the result in an element with id="demo" /*document.getElementById("demo").textContent = hours + "h " + minutes + "m " + seconds + "s "; */ //////////////////////////////////////// EARTH CLOCK ENDS ////////// drawFace(ctx, radius); drawNumbers(ctx, radius); drawNumbersMinutes(ctx, radius); drawTime(ctx, radius, days, hours, minutes, seconds, secondsty); //////////////////////////////////////////// EARTH CLOCK //////////// // Get todays date and time var nowEarth = new Date().getTime(); // Find the distance between now and the count down date var total_msEarth = (countDownDateEarth + nowEarth); // from here our values are based on our own time system var total_secondsEarth = (total_msEarth / ms_per_secEarth); var total_minutesEarth = (total_secondsEarth / sec_per_minEarth); var total_hoursEarth = (total_minutesEarth / min_per_hrEarth); var total_daysEarth = (total_hoursEarth / hrs_per_dayEarth); var Earthdays = Math.floor(total_daysEarth); var Earthhours = Math.floor(total_hoursEarth % hrs_per_dayEarth); var Earthminutes = Math.floor(total_minutesEarth % 120); var Earthseconds = Math.floor(total_secondsEarth % 120); var Earthsecondsty = Math.floor(total_secondsEarth % 86400); // Output the result in an element with id="demo" drawFace2(ctx, radius); drawNumbers2(ctx, radius); drawTimeEarth(ctx, radius, Earthdays, Earthhours, Earthminutes, Earthseconds, Earthsecondsty); // If the count down is over, write some text if (total_ms < 0) { document.getElementById("demo").innerHTML = "EXPIRED"; return; } requestAnimationFrame(loop); } loop(); function drawClock() { } function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.arc(0, 0, radius*1, 0, 2*Math.PI); ctx.fillStyle = 'white'; ctx.fill(); grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); grad.addColorStop(0, '#333'); grad.addColorStop(0.5, 'white'); grad.addColorStop(1, '#333'); ctx.strokeStyle = grad; //ctx.lineWidth = radius*0.05; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius*0.1, 0, 2.1*Math.PI); ctx.fillStyle = '#333'; ctx.fill(); /// Text Area ////////////////////////////////////// ctx.font = "bold 14px Arial"; ctx.fillStyle = "blue"; ctx.fillText("Sri Sivamathi",0,-110); ctx.font = "bold 12px Arial"; ctx.fillStyle = "black"; ctx.fillText("Moon Periodic Clock",0,-90); ctx.fillStyle = "blue"; ctx.fillText("ourmoonlife.com",0,90); } function drawNumbers(ctx, radius) { var ang; var num; ctx.textBaseline="middle"; ctx.textAlign="center"; for(num = 1; num < 29; num++){ if (num < = 9 & num > = 7) { ctx.font = "Bold 15px Arial"; ctx.fillStyle = "blue"; } else { ctx.font = radius*0.08 + "px arial"; ctx.fillStyle = "black"; } ang = num * Math.PI / 14; ctx.rotate(ang); ctx.translate(0, -radius*0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius*0.85); ctx.rotate(-ang); } } function drawNumbersMinutes(ctx, radius) { var ang; var num; ctx.textBaseline="middle"; ctx.textAlign="center"; ctx.font = "Bold 10px Arial"; for(num = 0; num < 113; num=num+4){ if (num < = 37 & num > = 28) { ctx.font = "Bold 10px Arial"; ctx.fillStyle = "blue"; } else { ctx.font = "Bold 10px Arial"; ctx.fillStyle = "green"; } ang = num * Math.PI / 56; ctx.rotate(ang); ctx.translate(0, -radius*0.94); ctx.rotate(-ang); /// 00 & 112 correction if (num == 0) { ctx.fillText("00", 0, 0); } else if (num != 112) { ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); } ctx.translate(0, radius*0.94); ctx.rotate(-ang); } } function drawTime(ctx, radius, days, hours, minutes, seconds, secondsty){ var hour = hours; var minute = minutes; var second = seconds; var sec = secondsty; ///////////// TEXT AREA FOR DIGITAL CLOCK ///////////////////////// ctx.font = "bold 18px Arial"; ctx.fillStyle = "blue"; ctx.fillText(seconds.toString(),58,-65); ctx.fillText(":", 30,-65); ctx.fillText(minutes.toString(),5,-65); ctx.fillText(":", -20,-65); ctx.fillText(hours.toString(),-45,-65); //hour // hour=hours%28; hour= (sec*Math.PI/((87808)/2)); drawHand(ctx, hour, radius*0.5, radius*0.03); //minute minute=(minutes*Math.PI/56)+(seconds*Math.PI/(224*112)); drawHand(ctx, minute, radius*0.7, radius*0.02); // second second=(seconds*Math.PI/56); drawHand(ctx, second, radius*0.8, radius*0.01); } function drawFace2(ctx, radius) { ctx.restore(); var grad; ctx.beginPath(); ctx.arc(75, 0, radius/3.7, 0, 2*Math.PI); ctx.fillStyle = 'white'; ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius*0.1/3, 0, 2*Math.PI); ctx.fillStyle = '#333'; ctx.fill(); } function drawNumbers2(ctx, radius) { var ang; var num; ctx.font = radius*0.04 + "px arial"; ctx.font = "bold 7px arial"; ctx.textBaseline="middle"; ctx.textAlign="center"; for(num = 1; num < 25; num++){ ang = num * Math.PI / 12; ctx.rotate(ang); ctx.translate(0, -radius*0.22); ctx.rotate(-ang); ctx.fillText(num.toString(), 75, 0); ctx.rotate(ang); ctx.translate(0, radius*0.22); ctx.rotate(-ang); } /// Text Area ctx.font = "bold 24px Arial"; ctx.fillStyle = "black"; //ctx.fillText("EARTH CLOCK",0,-80); } function drawTimeEarth(ctx, radius, Earthdays, Earthhours, Earthminutes, Earthseconds, Earthsecondsty) { var Earthhour = Earthhours; var Earthminute = Earthminutes; var Earthsecond = Earthseconds; var Earthsec = Earthsecondsty; ///////////// TEXT AREA FOR DIGITAL CLOCK ///////////////////////// ctx.font = "bold 12px Arial"; ctx.fillStyle = "black"; ctx.fillText("Earth Clock", 0,40); ctx.font = "bold 18px Arial"; ctx.fillStyle = "blue"; ctx.fillText(Earthseconds.toString(),58,65); ctx.fillText(":", 30,65); ctx.fillText(Earthminutes.toString(),5,65); ctx.fillText(":", -20,65); ctx.fillText(Earthhours.toString(),-45,65); var hour = Earthhours; var minutes = Earthminutes; var seconds = Earthseconds; var sec = Earthsecondsty; //hour // hour=hours%28; hour= (sec*Math.PI/((86400)/2)); drawHand2(ctx, hour, radius*0.12, radius*0.007); //minute minute=(minutes*Math.PI/60)+(seconds*Math.PI/(240*120)); drawHand2(ctx, minute, radius*0.16, radius*0.007); // second second=(seconds*Math.PI/60); drawHand2(ctx, second, radius*0.20, radius*0.002); } function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0,0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); } function drawHand2(ctx, pos, length, width) { var canvas = document.getElementById("canvas"); var ctx3 = canvas.getContext("2d"); ctx3.translate(75,0); ctx3.beginPath(); ctx3.lineWidth = width; ctx3.lineCap = "round"; ctx3.moveTo(0,0); ctx3.rotate(pos); ctx3.lineTo(0, -length); ctx3.stroke(); ctx3.rotate(-pos); ctx3.translate(-75,0); }

< !DOCTYPE html> < !-- saved from url=(0094)https://ourmoonlife.com/wp-content/uploads/2019/04/Sri_Sivamathi_Earth_inside_moonClock-1.html --> < html> < head> < meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> < /head> < body> < p> Sivamathi Moon Clock Six - 002< /p> < canvas id="canvas" width="400" height="400" style="background-color:#2b4d84"> < canvas id="ca" width="400" height="400" style="background-color:#333"> < /canvas> < /canvas> < /body> < /html>

答案您不能在应用小部件中使用HTML，JavaScript或CSS。应用小部件仅支持一组有限的平台小部件（例如，TextView）。应用程序小部件不支持WebView或第三方Web呈现库。
【Android Widget时钟，运行离线时钟28小时，56分钟，56秒】因此，您无法从VueJS或任何其他形式的PWA创建应用程序小部件。