刮刮乐
- 主要用到html5技术
核心代码如下:
$postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
$fromUsername = $postObj->FromUserName;
$toUsername = $postObj->ToUserName;
$keyword = trim($postObj->Content);
$time = time();
$textTpl = "<xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[news]]></MsgType>
<ArticleCount>1</ArticleCount>
<Articles>
<item>
<Title><![CDATA[刮刮乐刮出大奖]]></Title>
<Description><![CDATA[]]></Description>
<PicUrl><![CDATA[http://1.dq095.applinzi.com/image/ggl.jpg]]></PicUrl>
<Url><![CDATA[%s]]></Url>
</item>
</Articles>
<FuncFlag>0</FuncFlag>
</xml>";
$a=rand(1,4);
switch ($a)
{
case "1":
$b="http://1.dq095.applinzi.com/image/1.html";
break;
case "2":
$b="http://1.dq095.applinzi.com/image/2.html";
break;
case "3":
$b="http://1.dq095.applinzi.com/image/3.html";
break;
default:
$b="http://1.dq095.applinzi.com/image/4.html";
}
$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $b);
echo $resultStr;
刮刮乐html5代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>刮刮乐</title>
<script type="text/javascript">
window.onload = function () {
init();
}
CanvasRenderingContext2D.prototype.clearArc = function (x, y, radius, startAngle, endAngle, counterclockwise) {
var distance = function (x0, y0, x1, y1) {
var dis = Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));
//return Math.ceil(dis*10000)/10000;
return Math.round(dis * 10000) / 10000;
};
//首先获得矩形
var diameter = radius * 2;
var startX = x - radius;
var cx = radius - (0 - startX);
startX = startX < 0 ? 0 : startX;
cx = cx - startX;
var startY = y - radius;
var cy = radius - (0 - startY);
startY = startY < 0 ? 0 : startY;
cy = cy - startY;
var imgData = this.getImageData(startX, startY, diameter, diameter);//需要处理的矩形
for (var i = 0; i < imgData.data.length; i += 4) {
//矩阵内的坐标
var ii = i / 4;
var ix = Math.floor(ii / imgData.width);
var iy = ii % imgData.height;
var dis = distance(ix, iy, cx, cy);
if (dis <= radius) {//此点在圆内
imgData.data[i + 0] = 0;
imgData.data[i + 1] = 0;
imgData.data[i + 2] = 0;
imgData.data[i + 3] = 0;
continue;
}
var dr = dis - radius;
if (dr < Math.SQRT2) {
var n = Math.sqrt(Math.pow(dr, 2) / 2) * 256;//新
var o = imgData.data[i + 3];
imgData.data[i + 3] = n < o ? n : o;
continue;
}
}
this.putImageData(imgData, startX, startY);
};
function init() {
var imageWidth = 200;
var imageHeight = 100;
var gglc = document.getElementById("gglc");
var gglc2D = gglc.getContext("2d");
gglc2D.fillStyle = '#cccccc'; //设置覆盖层的颜色
gglc2D.fillRect(1, 1, imageWidth, imageHeight); //设置覆盖的区域
//gglc2D.clearArc(25,25,20);
gglc.addEventListener("touchmove", function (event) {
event.preventDefault();
for (var i in event.targetTouches) {
var touch = event.targetTouches[i];
gglc2D.clearArc(touch.pageX, touch.pageY, 20);
}
}, false);
gglc.addEventListener("touchstart", function (event) {
event.preventDefault();
for (var i in event.targetTouches) {
var touch = event.targetTouches[i];
gglc2D.clearArc(touch.pageX, touch.pageY, 20);
}
}, false);
}
</script>
</head>
<body>
<div style="position: relative; width: 100%;height: 100%;">
<div style="position: absolute; width: 155px; height: 50px; text-align: center;line-height: 50px;border: 1px solid #ccc;">
<img src="3.jpg">
</div>
<canvas style="position: absolute;" id="gglc" width="155" height="50"></canvas>
</div>
<br><br><br>
<p>奖品设置</p>
<p>一等奖:IPAD</p>
<p>二等奖:山寨机</p>
<p>三等奖:5元话费</p>
<p>抽奖后返回微信,发送手机号码,等待工作人员联系</p>
</body>
</html>
index.php整体代码如下:
<?php
/**
* wechat php test
*/
//define your token
define("TOKEN", "weixin");
$wechatObj = new wechatCallbackapiTest();
$wechatObj->responseMsg();
class wechatCallbackapiTest
{
public function valid()
{
$echoStr = $_GET["echostr"];
//valid signature , option
if($this->checkSignature()){
echo $echoStr;
exit;
}
}
public function responseMsg()
{
//get post data, May be due to the different environments
$postStr = $GLOBALS["HTTP_RAW_POST_DATA"];
//extract post data
if (!empty($postStr)){
$postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
$fromUsername = $postObj->FromUserName;
$toUsername = $postObj->ToUserName;
$keyword = trim($postObj->Content);
$time = time();
$textTpl = "<xml>
<ToUserName><![CDATA[%s]]></ToUserName>
<FromUserName><![CDATA[%s]]></FromUserName>
<CreateTime>%s</CreateTime>
<MsgType><![CDATA[news]]></MsgType>
<ArticleCount>1</ArticleCount>
<Articles>
<item>
<Title><![CDATA[刮刮乐刮出大奖]]></Title>
<Description><![CDATA[]]></Description>
<PicUrl><![CDATA[http://1.dq095.applinzi.com/image/ggl.jpg]]></PicUrl>
<Url><![CDATA[%s]]></Url>
</item>
</Articles>
<FuncFlag>0</FuncFlag>
</xml>";
$a=rand(1,4);
switch ($a)
{
case "1":
$b="http://1.dq095.applinzi.com/image/1.html";
break;
case "2":
$b="http://1.dq095.applinzi.com/image/2.html";
break;
case "3":
$b="http://1.dq095.applinzi.com/image/3.html";
break;
default:
$b="http://1.dq095.applinzi.com/image/4.html";
}
$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $b);
echo $resultStr;
}else {
echo "";
exit;
}
}
private function checkSignature()
{
$signature = $_GET["signature"];
$timestamp = $_GET["timestamp"];
$nonce = $_GET["nonce"];
$token = TOKEN;
$tmpArr = array($token, $timestamp, $nonce);
sort($tmpArr);
$tmpStr = implode( $tmpArr );
$tmpStr = sha1( $tmpStr );
if( $tmpStr == $signature ){
return true;
}else{
return false;
}
}
}
?>