微信公众号开发之(31)刮刮乐

刮刮乐

  • 主要用到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;
        }
    }
}

?>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值