美文网首页
13.1.4 画时钟

13.1.4 画时钟

作者: 曹渊说创业 | 来源:发表于2016-12-24 00:28 被阅读26次

13.1.4 画时钟

demo.html

<body>
    <img id="time" src="test.php" />


    <script>
        setInterval(function(){
                document.getElementById("time").src="test.php?"+Math.random();
                
            },1000);
    </script>   
</body>

test.php

<?php
    //获取系统时间
    date_default_timezone_set("PRC");

    $h = date("H");
    $i = date("i");
    $s = date("s");

    //1 创建资源(画布的大小)
    $img = imagecreatetruecolor(200, 250);  
    //设置画布的颜色
    $white =  imagecolorallocate($img, 0xFF, 0xFF, 0xFF);
    $red =  imagecolorallocate($img, 255, 0, 0);
    $blue =  imagecolorallocate($img, 0, 0, 0XFF);
    $pink =  imagecolorallocate($img, 0XFF, 0, 0XFF);
    $green =  imagecolorallocate($img, 0, 0xFF, 0);
    
    
    imagefill($img, 0, 0, $white);
    //2. 制作各种颜色
    imageellipse($img, 100, 100, 190, 190, $blue);
    imagefilledellipse($img, 100, 100, 4, 4, $blue);

    imagestring($img, 3, 95, 8,  "12", $blue);
    imagestring($img, 3,180, 95, "03", $blue);
    imagestring($img, 3, 95, 180,  "06", $blue);
    imagestring($img, 3, 11, 95,  "09", $blue);

    //秒针

    $len = 80;


     $a = $len*sin(pi()/30*$s);
     $b = $len*cos(pi()/30*$s);
    $x = 100 + $a;
    $y = 100 - $b;


    imageline($img, 100, 100, $x, $y, $red);

    //数字的时间
    imagestring($img, 5, 20, 230, "NOW: {$h}:{$i}:{$s}", $red);

    //4保存,或输出给浏览, 写第二个参数就是保存
    header("Content-Type:images/gif");
    imagegif($img);

    //5. 释放资源
    imagedestroy($img);

相关文章

  • 13.1.4 画时钟

    13.1.4 画时钟 demo.html test.php

  • canvas画时钟

    html: js: var dom = $("#clock"); var ctx = dom[0].getCont...

  • Canvas 画时钟

    前言 不管学习什么,不动手去做,永远不能熟练掌握。学习了 canvas API,会觉得只要按照直线、圆等画法去画,...

  • canvas 画时钟

    直接运行即可:

  • 使用 CALayer 画时钟

    前言:学无止境,打算深入了解下动画,哎都怪自己太菜!使用 CALayer画时钟。做的精确一点,要每秒钟秒、分、时针...

  • raphael.js 画时钟/raphael.js transf

    raphael.js 画时钟 raphael.js transform\animate

  • Android画个时钟玩玩

    先看下最终的效果 开始实现 新建一个ClockView集成View 先重写onMeasure方法,这里要先说一下V...

  • LCD上显示指针式的时钟

    1、重点 (1)画线函数:画任意一条直线,包含斜线 (2)刻画时钟模型 (3)模拟时钟划线 2、画线函数 (1)通...

  • 一个圆形时钟

    先上效果看看: 突然想到时钟挺有意思的就弄了个 先画个表盘吧/// 画时针/// 画分针 /// 画秒针/// 设...

  • 用Tableau画极坐标时钟

    极坐标时钟(polar clock)是我在刚开始学习tableau的时候看到的一个作品 http://stanke...

网友评论

      本文标题:13.1.4 画时钟

      本文链接:https://www.haomeiwen.com/subject/jsrlvttx.html