ローディング中

canvasで現在時刻が表示される「画像」を作ってみた。

最近夜になると車のフロントガラスが凍ってて驚きまくってるマンノです。
台湾の今の天気は21度なんだってさ。(2016/12/17現在)
もう本当びっくりしちゃうよね。

昨日義弟から「時間が自動更新される画像を作りたい」と言われまして。
さくさくっと、試しに作ってみました。

要件としては以下の通り

  • 現在時間が表示される
  • 開いたら今の時間が更新される。
  • そんな画像。

そもそもなんで画像である必要があるのかは分からないのですが、やってみました。

とりあえずjavascriptとcanvasで再現してみる。

初めはhtml2canvasを使おうかとも悩んだのですが。
なにもそこまでしなくても良いんじゃないか?とおもいまして、JSをゴリゴリかく。
とりあえず出来上がったのがこちら。

See the Pen RoEBOx by MANNO (@noru_rundy) on CodePen.

    DD = new Date();
    Year = DD.getFullYear();
    Month = DD.getMonth() + 1;
    Day = DD.getDate();
    Hours = DD.getHours()  ;
    Minutes = DD.getMinutes() ;
    Seconds = DD.getSeconds();

    var ctx = document.getElementById("cv").getContext("2d");
    // text
    var txt = "更新時間: " + Year + "-" + Month + "-" + Day + " " + Hours + ":" + Minutes + ":" + Seconds;
    ctx.font = "15px Arial"; // font size ,font tipe
    ctx.fillStyle = "black"; // font collor

    ctx.fillText(txt,10,25); // position
    var canvas = document.getElementById('cv');

とてもシンプル。

  • javascriptで時計を生成
  • canvasで表示

たったこの2点だけです。
canvasは仕事でも何度か使ったことがあった為、そこまで悩むことなく作れました。

    ctx.font = "15px Arial"; // font size ,font tipe
    ctx.fillStyle = "black"; // font collor

この部分でフォントのスタイルや色のを好きなように弄ることができます。
もう本当好き勝手いじっちゃって!

せっかくなので自動更新、自動ダウンロード機能を追加してみる。

先程のコードに以下のコードを追加

    var data = canvas.toDataURL();

    function aaa(){
      document.form1.data.value = data ;
       setTimeout(function(){
         document.form1.submit();
       },6000); // 更新的間隔 1秒1000 ,1分 6000

    };

一分間に1度自動更新されるようにかつ。

document.form1.data.value = data ;

では後述するPHPにcanvasのbase64URLを代入するように設定します。
そのほかHTMLでhiddenのformを作成し、自動的にsubmitしちゃうというような処理も書いています。

HTML

<body onload="aaa();">
 <form action="time-stamp.php" name="form1">
   <input type="hidden" size="30" name="data">
  </form>

PHP

<?php 
  $url = $_GET['data']; 
  $data = file_get_contents($url); 
  file_put_contents('last-revision.jpg',$data); 
?>

全てのコードを一つのファイル内にまとめると、自動で更新し続けるファイルが出来上がります。
しかも自動でjpgファイルがダウンロードされ続けるというおまけ付き。
何に使えるかはわからないけど、、

色々やったけど使い道が分からない。

Primate 460871 960 720

色々してみた結果。
あまり使いみちが分からないプログラムが出来ました。
でも欲しがってた本人は喜んでくれたので、まぁ良しとしましょう。
base64についてや、canvasについてなど勉強になりました。
次の案件で使えないかなー。

 

 

 

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.