html 캔버스로 시계 만들기

-1

HTML5, 캔버스 및 자바 스크립트를 사용하여 시계를 만들고 싶습니다. 그러나 Sublime으로 다음 코드를 실행할 때 나는 아무것도 볼 수없는 이유를 이해하지 못합니다. 나는 인터넷 익스플로러와 구글 크롬을 사용하여 무엇인가 보려고했다. 아마도 코드에 오류가 있습니까?html 캔버스로 시계 만들기

이

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Clock</title> 
    <!--<script src="clockJS.js" ></script>--> 
</head> 
<body> 

    <canvas id="canvas" width="500" height="500"></canvas> 
    <img id="myImage" /> 
    <script> 

    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext('2d'); 
    ctx.strokeStyle = '28d1fa'; 
    ctx.linewidth = 17; 
    ctx.lineCap = "round"; 
    ctx.shadowBlur = 15; 
    ctx.shadowColor = '28d1fa'; 

    function degToRad(degree) { 
     var factor = Math.PI/180; 
     return degree * factor; 
    } 

    function renderTime() { 
     var now = new Date(); 
     var today = now.toDateString(); 
     var time = today.toLocaleTimeString(); 
     var hours = now.getHours(); 
     var minutes = now.getMinutes(); 
     var seconds = now.getSeconds(); 
     var milliseconds = now.getMilliseconds(); 
     var newSeconds = seconds + (milliseconds/1000); 

     //Background 
     gradient = ctx.createRadioGradient(250, 250, 5, 250, 250, 300); 
     gradient.addColorStop(0, '09303a'); 
     gradient.addColorStop(1, 'black'); 
     ctx.fillStyle = gradient; 
     //ctx.fillStyle = '333333'; 
     ctx.fillRect(0, 0, 500, 500); 

     //Hours 
     ctx.beginPath(); 
     ctx.arc(250, 250, 200, degToRad(270), degToRad((hours*15)-90)); 
     ctx.stroke(); 

     //Minutes 
     ctx.beginPath(); 
     ctx.arc(250, 250, 170, degToRad(270), degToRad((minutes*6)-90)); 
     ctx.stroke(); 

     //Seconds 
     ctx.beginPath(); 
     ctx.arc(250, 250, 140, degToRad(270), degToRad((newSeconds*6)-90)); 
     ctx.stroke(); 

     //Date 
     ctx.font = "23px Arial bold"; 
     ctx.fillStyle = '28d1fa'; 
     ctx.fillText(today, 175, 250); 

     //Time 
     ctx.font = "23px Arial"; 
     ctx.fillStyle = '28d1fa'; 
     ctx.fillText(time, 175, 280); 

     var dataUrl = canvas.toDataUrl(); 

     document.getElementById('myImage').src = dataUrl; 

    } 

    setInterval(renderTime, 40); 

    </script> 

</body> 
</html>

누군가가 나를 도울 수 :

이 내 코드?

출처

2016-10-24 Michele della Mea

(콘솔을 열고 읽기 오류를 https://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different- 브라우저). 오류 메시지가 즉시 해결하는 데 도움이되는 코드에는 철자/대문자/형식 오류가 많이 있습니다. – tcooc

변경이 라인 : 여기에

var time = today.toLocaleTimeString(); 
gradient = ctx.createRadioGradient(250, 250, 5, 250, 250, 300); 
var dataUrl = canvas.toDataUrl();

var time = now.toLocaleTimeString(); 
gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300); 
var dataUrl = canvas.toDataURL();

당신에게 화면에 무엇인가를 얻어야한다. 모든 자바 스크립트 오류를 보려면 Chrome의 개발자 콘솔을 사용하는 것이 좋습니다.

출처

2016-10-24 19:30:00

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); 
 

 
function drawClock() { 
 
    drawFace(ctx, radius); 
 
    drawNumbers(ctx, radius); 
 
    drawTime(ctx, radius); 
 
} 
 

 
function drawFace(ctx, radius) { 
 
    var grad; 
 
    ctx.beginPath(); 
 
    ctx.arc(0, 0, radius, 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.1; 
 
    ctx.stroke(); 
 
    ctx.beginPath(); 
 
    ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); 
 
    ctx.fillStyle = '#333'; 
 
    ctx.fill(); 
 
} 
 

 
function drawNumbers(ctx, radius) { 
 
    var ang; 
 
    var num; 
 
    ctx.font = radius*0.15 + "px arial"; 
 
    ctx.textBaseline="middle"; 
 
    ctx.textAlign="center"; 
 
    for(num = 1; num < 13; num++){ 
 
    ang = num * Math.PI/6; 
 
    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 drawTime(ctx, radius){ 
 
    var now = new Date(); 
 
    var hour = now.getHours(); 
 
    var minute = now.getMinutes(); 
 
    var second = now.getSeconds(); 
 
    //hour 
 
    hour=hour%12; 
 
    hour=(hour*Math.PI/6)+ 
 
    (minute*Math.PI/(6*60))+ 
 
    (second*Math.PI/(360*60)); 
 
    drawHand(ctx, hour, radius*0.5, radius*0.07); 
 
    //minute 
 
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); 
 
    drawHand(ctx, minute, radius*0.8, radius*0.07); 
 
    // second 
 
    second=(second*Math.PI/30); 
 
    drawHand(ctx, second, radius*0.9, radius*0.02); 
 
} 
 

 
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); 
 
}

<canvas id="canvas" width="400" height="400" 
 
style="background-color:#333"> 
 
</canvas>

출처

2016-10-24 19:39:53

html 캔버스로 시계 만들기

답변

관련 문제