Javascript 用html画布构建时钟_Javascript_Html_Css_Canvas

Javascript 用html画布构建时钟

javascript html css canvas

Javascript 用html画布构建时钟,javascript,html,css,canvas,Javascript,Html,Css,Canvas,我想用HTML5、画布和JavaScript创建一个时钟。然而，我不明白为什么当我用Sublime运行下面的代码时，我什么都看不到。我尝试使用Internet Explorer和Google Chrome查看一些东西。也许代码中有错误这是我的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Clock</title>

我想用HTML5、画布和JavaScript创建一个时钟。然而，我不明白为什么当我用Sublime运行下面的代码时，我什么都看不到。我尝试使用Internet Explorer和Google Chrome查看一些东西。也许代码中有错误

这是我的代码：

<!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>


时钟

有人能帮我吗？

更改这行：

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的开发者控制台查看所有JavaScript错误。

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量半径=画布高度/2；
平移（半径，半径）；
半径=半径*0.90
设置间隔（时钟，1000）；
函数drawClock（）{
拉深面（ctx，半径）；
图纸编号（ctx、半径）；
拉深时间（ctx，半径）；
}
功能拉伸面（ctx，半径）{
var梯度；
ctx.beginPath（）；
弧（0，0，半径，0，2*Math.PI）；
ctx.fillStyle='白色'；
ctx.fill（）；
梯度=ctx.createRadialGradient（0,0，半径*0.95,0,0，半径*1.05）；
渐变加色停止（0，#333'）；
渐变加色停止（0.5，'白色'）；
渐变加色停止（1，#333'）；
ctx.strokeStyle=梯度；
ctx.lineWidth=半径*0.1；
ctx.stroke（）；
ctx.beginPath（）；
ctx.弧（0,0，半径*0.1,0,2*Math.PI）；
ctx.fillStyle='#333'；
ctx.fill（）；
}
功能图纸编号（ctx、半径）{
瓦朗；
var-num；
ctx.font=半径*0.15+“px arial”；
ctx.textb基线=“中间”；
ctx.textAlign=“中心”；
对于（num=1；num<13；num++）{
ang=num*Math.PI/6；
ctx.旋转（ang）；
平移（0，-半径*0.85）；
ctx.旋转（-ang）；
ctx.fillText（num.toString（），0,0）；
ctx.旋转（ang）；
平移（0，半径*0.85）；
ctx.旋转（-ang）；
}
}
函数绘制时间（ctx，半径）{
var now=新日期（）；
var hour=now.getHours（）；
var minute=now.getMinutes（）；
var second=now.getSeconds（）；
//时辰
小时=小时%12；
小时=（小时*数学PI/6）+
（分钟*数学PI/（6*60））+
（第二个*数学PI/（360*60））；
拉手（ctx，小时，半径*0.5，半径*0.07）；
//分钟
分钟=（分钟*数学PI/30）+（秒*数学PI/（30*60））；
拉手（ctx，分钟，半径*0.8，半径*0.07）；
//第二
秒=（秒*数学PI/30）；
拉手（ctx，秒，半径*0.9，半径*0.02）；
}
功能drawHand（ctx、位置、长度、宽度）{
ctx.beginPath（）；
ctx.lineWidth=宽度；
ctx.lineCap=“圆形”；
ctx.moveTo（0,0）；
ctx.旋转（位置）；
ctx.lineTo（0，-长度）；
ctx.stroke（）；
ctx.旋转（-pos）；
}

打开控制台并读取错误（）。代码中存在大量拼写/大小写/格式错误，错误消息将有助于立即解决这些错误。