Javascript 倒计时时钟动画
我正在尝试创建倒计时时钟动画gif 最后，它需要展示这样的东西： 我有两个“阶段”：Javascript 倒计时时钟动画,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我正在尝试创建倒计时时钟动画gif 最后，它需要展示这样的东西： 我有两个“阶段”： 为倒计时时钟创建“背景”图像的部分 创建倒计时时钟本身的部件 当我单独运行第1\2部分（每次运行一次）时，它工作，但当我一起运行代码时，它不工作。 我在客户端没有收到任何错误（当我在ajax调用后返回数据时只有一个错误，但我并不真正需要返回数据，只是为了调试..） 我使用canvas和jQuery创建png背景图像，然后将其保存在PHP代码中（ajax调用保存图像的其他页面名称Process.PHP），然后尝试
<?php include 'GIFEncoder.class.php';
if($_POST['action'] == "bbb") {
createAnimationGif();
$test1 = "sss";
echo json_encode($test1);
}
function createAnimationGif(){
date_default_timezone_set('Asia/Jerusalem');
$time = '2016-02-28 23:00:00';
$future_date = new DateTime(date('r',strtotime($time)));
$time_now = time();
$now = new DateTime(date('r', $time_now));
$frames = array();
$delays = array();
$delay = 100; // milliseconds
$image = imagecreatefrompng('canvas.png');
$font = array(
'size'=>40,
'angle'=>0,
'x-offset'=>45,
'y-offset'=>70,
'file'=>'DIGITALDREAM.ttf',
'color'=>imagecolorallocate($image, 255, 0, 140),
);
for($i = 0; $i <= 60; $i++){
$interval = date_diff($future_date, $now);
if($future_date < $now){
// Open the first source image and add the text.
$image = imagecreatefrompng('canvas.png');
$text = $interval->format('00:00:00:00');
imagettftext ($image , $font['size'] , $font['angle'] , $font['x-offset'] , $font['y-offset'] , $font['color'] , $font['file'], $text );
ob_start();
imagegif($image);
$frames[]=ob_get_contents();
$delays[]=$delay;
$loops = 1;
ob_end_clean();
break;
}
else {
// Open the first source image and add the text.
$image = imagecreatefrompng('canvas.png');
$text = $interval->format('%a:%H:%I:%S');
// %a is weird in that it doesn’t give you a two digit number
// check if it starts with a single digit 0-9
// and prepend a 0 if it does
if(preg_match('/^[0-9]\:/', $text)){
$text = '0'.$text;
}
imagettftext ($image , $font['size'] , $font['angle'] , $font['x-offset'] , $font['y-offset'] , $font['color'] , $font['file'], $text );
ob_start();
imagegif($image);
$frames[]=ob_get_contents();
$delays[]=$delay;
$loops = 0;
ob_end_clean();
}
$now->modify('+1 second');
}
//expire this image instantly
header( 'Expires: Sat, 26 Jul 1997 05:00:00 GMT' );
header( 'Last-Modified: ' . gmdate( 'D, d M Y H:i:s' ) . ' GMT' );
header( 'Cache-Control: no-store, no-cache, must-revalidate' );
header( 'Cache-Control: post-check=0, pre-check=0', false );
header( 'Pragma: no-cache' );
$gif = new AnimatedGif($frames,$delays,$loops);
$gif ->display();
}?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta content="width=device-width ,initial-scale=1" name="viewport">
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<title>AnimationGif</title>
<script type="text/javascript">
function drawCanvas() {
var canvas = document.getElementById("canvasText");
var context = canvas.getContext('2d');
//create the background color
context.beginPath();
context.rect(0, 0, 564, 100);
context.fillStyle = "#14161c";
context.fill();
context.beginPath();
context.rect(0, 100, 564, 20);
context.fillStyle = "#1c1a1c";
context.fill();
// Fill Text
context.beginPath();
context.lineWidth = 1;
context.fillStyle = "#545654";
context.lineStyle = "#545654";
context.font = "16px sans-serif";
context.fillText("this is test", 0, 115);
}
$(document).ready(function () {
//draw the image
drawCanvas();
//post it to other file that will process and save the image
var data = document.getElementById("canvasText").toDataURL();
$.post("Process.php",
{ imageData: data },
function (data) {
console.log('Background image created successful');
createClock();
}
);
});
</script>
<script type="text/javascript">
function createClock() {
$.ajax({
type: "POST",
data: { 'action': 'bbb' },
success: function (data) {
var returnDataTest = JSON.parse(data);
console.log(data);
}
});
}
</script>
<style type="text/css">
</style>
</head>
<body>
<canvas id="canvasText" width="564" height="120">
<p>We apologize, your browser does not support canvas at this time!</p>
</canvas>
</body></html>
动画GIF
函数drawCanvas（）{
var canvas=document.getElementById（“canvasText”）；
var context=canvas.getContext（'2d'）；
//创建背景色
context.beginPath（）；
rect（0,0564100）；
context.fillStyle=“#14161c”；
context.fill（）；
context.beginPath（）；
rect（0100564,20）；
context.fillStyle=“#1c1a1c”；
context.fill（）；
//填充文本
context.beginPath（）；
context.lineWidth=1；
context.fillStyle=“#545654”；
context.lineStyle=“#545654”；
context.font=“16px无衬线”；
fillText（“这是测试”，0，115）；
}
$（文档）.ready（函数（）{
//画图像
画布（）；
//将其发布到将处理和保存图像的其他文件
var data=document.getElementById（“canvasText”）.toDataURL（）；
$.post（“Process.php”，
{imageData:data}，
功能（数据）{
log（'Background image created successful'）；
createClock（）；
}
);
});
函数createClock（）{
$.ajax({
类型：“POST”，
数据：{'action'：'bbb'}，
成功：功能（数据）{
var returnDataTest=JSON.parse（数据）；
控制台日志（数据）；
}
});
}
很抱歉，您的浏览器此时不支持画布
<?php
$data = substr($_POST['imageData'], strpos($_POST['imageData'], ",") + 1);
$decodedData = base64_decode($data);
$fp = fopen("canvas.png", 'wb');
fwrite($fp, $decodedData);
fclose();
//echo "/canvas.png";?>