canvas-转盘

(function(exports) {
    "use strict";
    var Dial = function(options) {
            var self = this;


            var index = 0,
                start = 0,
                seep = 0,
                t = 0,
                end = 0,
                color = "",
                isBeganDraw = "red",
                select = 0,
                screenWidth = window.screen.width,
                screenHeight = window.screen.height;


            self.random = -1;
            self.clear = 0;
            self.list = options.list || [{
                name: "一等奖"
            }, {
                name: "二等奖"
            }, {
                name: "三等奖"
            }, {
                name: "四等奖"
            }, {
                name: "五等奖"
            }, {
                name: "六等奖"
            }, {
                name: "七等奖"
            }, {
                name: "八等奖"
            }, {
                name: "九等奖"
            }];
            var init = function(options) {
                    creatCanvas(options);
                },
                creatCanvas = function(options) {
                    if (!options) {
                        return;
                    }
                    $("#" + options.id).html(' <canvas width="' + screenWidth + '" height="' + screenHeight + '" id="myCanvas">浏览器不支持canvas</canvas>');
                    self.canvas = document.getElementById("myCanvas");
                    self.ctx = self.canvas.getContext("2d");
                    self.canvas.addEventListener("click", function(e) {
                        if (isBeganDraw === "red") {
                            var p = e;
                            if (self.ctx.isPointInPath(p.x, p.y)) {
                                self.random = parseInt(Math.random() * 9, 10);
                                self.beganDraw(options);
                            }
                        }
                    });
                    self.ctx.beginPath();
                    self.ctx.arc(screenWidth / 2, screenWidth / 2 + 50, screenWidth / 2 - 20, Math.PI * 2, 0, false);
                    self.ctx.stroke();
                    self.ctx.save();
                    self.ctx.restore();


                    var d = 0;
                    for (var i = 0; i < 9; i++) {
                        start = 1 - (2 / 9) * i;
                        end = 1 - (2 / 9) * (i + 1);
                        if ((i + 1) % 3 == 0) {
                            color = "yellow"
                        } else if ((i + 1) % 2 == 0) {
                            color = "blue";
                        } else {
                            color = "red";
                        }


                        self.ctx.save();
                        self.ctx.restore();
                        //奖品
                        var x = screenWidth / 2 - (screenWidth * 0.32) * Math.cos(Math.PI * (1 / 9 + d * 2 / 9));
                        var y = screenWidth / 2 + 50 - (screenWidth * 0.32) * Math.sin(Math.PI * (1 / 9 + d * 2 / 9));
                        self.ctx.font = "20px Courier New";
                        self.ctx.globalAlpha = 1;
                        self.ctx.fillStyle = "#000";
                        self.ctx.fillText(self.list[d].name, x - 32, y);
                        d++;
                        self.ctx.beginPath();
                        self.ctx.globalAlpha = 0.4;
                        self.ctx.fillStyle = color;
                        self.ctx.moveTo(screenWidth / 2, screenWidth / 2 + 50);
                        self.ctx.arc(screenWidth / 2, screenWidth / 2 + 50, screenWidth / 2 - 20, -Math.PI * start, -Math.PI * end, false);
                        self.ctx.lineTo(screenWidth / 2, screenWidth / 2 + 50);
                        self.ctx.fill();
                        self.ctx.save();
                        self.ctx.restore();


                    }
                    btn(self.ctx, screenWidth / 2, screenWidth / 2 + 50, isBeganDraw, options, self);
                };
            self.beganDraw = function(options) {
                var d = 0;
                if (t < 4) {
                    seep = 500 - 120 * t;
                } else if (t >= 4 && t < 10) {
                    seep = 20;
                } else if (t > 10) {
                    seep = 80 * (t - 10) + 20;


                }
                self.ctx.clearRect(0, 0, screenWidth, screenHeight);
                self.ctx.beginPath();
                self.ctx.strokeStyle = "#000";
                self.ctx.lineWidth = 2;
                self.ctx.arc(screenWidth / 2, screenWidth / 2 + 50, screenWidth / 2 - 20, Math.PI * 2, 0, false);
                self.ctx.stroke();
                self.ctx.save();
                self.ctx.restore();
                for (var i = 0; i < 9; i++) {
                    start = 1 - (2 / 9) * i;
                    end = 1 - (2 / 9) * (i + 1);
                    if ((i + 1) % 3 == 0) {
                        color = "yellow"
                    } else if ((i + 1) % 2 == 0) {
                        color = "blue";
                    } else {
                        color = "red";
                    }
                    //奖品
                    var x = screenWidth / 2 - (screenWidth * 0.32) * Math.cos(Math.PI * (1 / 9 + d * 2 / 9));
                    var y = screenWidth / 2 + 50 - (screenWidth * 0.32) * Math.sin(Math.PI * (1 / 9 + d * 2 / 9));
                    self.ctx.font = "20px Courier New";
                    self.ctx.globalAlpha = 1;
                    self.ctx.fillStyle = "#000";
                    self.ctx.fillText(self.list[d].name, x - 32, y);
                    self.ctx.save();
                    self.ctx.restore();


                    self.ctx.beginPath();
                    self.ctx.globalAlpha = 0.4;
                    self.ctx.fillStyle = color;
                    self.ctx.moveTo(screenWidth / 2, screenWidth / 2 + 50);
                    self.ctx.arc(screenWidth / 2, screenWidth / 2 + 50, screenWidth / 2 - 20, -Math.PI * start, -Math.PI * end, false);
                    self.ctx.lineTo(screenWidth / 2, screenWidth / 2 + 50);
                    self.ctx.fill();
                    self.ctx.save();
                    self.ctx.restore();


                    d++;
                }
                if (index == 9) {
                    index = 0;
                    t++;
                }
                start = 1 - (2 / 9) * index;
                end = 1 - (2 / 9) * (index + 1);
                if ((index + 1) % 3 == 0) {
                    color = "yellow"
                } else if ((index + 1) % 2 == 0) {
                    color = "blue";
                } else {
                    color = "red";
                }
                self.ctx.beginPath();
                self.ctx.globalAlpha = 1;
                self.ctx.fillStyle = color;
                self.ctx.moveTo(screenWidth / 2, screenWidth / 2 + 50);
                self.ctx.arc(screenWidth / 2, screenWidth / 2 + 50, screenWidth / 2 - 20, -Math.PI * start, -Math.PI * end, false);
                self.ctx.lineTo(screenWidth / 2, screenWidth / 2 + 50);
                self.ctx.fill();
                self.ctx.save();
                self.ctx.restore();
                //奖品
                var x = screenWidth / 2 - (screenWidth * 0.32) * Math.cos(Math.PI * (1 / 9 + select * 2 / 9));
                var y = screenWidth / 2 + 50 - (screenWidth * 0.32) * Math.sin(Math.PI * (1 / 9 + select * 2 / 9));
                self.ctx.font = "20px Courier New";
                self.ctx.globalAlpha = 1;
                self.ctx.fillStyle = "#000";
                self.ctx.fillText(self.list[index].name, x - 32, y);
                self.ctx.save();
                self.ctx.restore();
                if (t == 15 && index == self.random) {
                    isBeganDraw = "red";


                } else {
                    isBeganDraw = "#ccc";
                }


                btn(self.ctx, screenWidth / 2, screenWidth / 2 + 50, isBeganDraw, options, self);
                if (t == 15) {
                    if (index == self.random) {
                        alert("恭喜你中间" + self.list[index].name);
                        clearTimeout(self.clear);
                        index = 0;
                        t = 0;
                        seep = 0;
                        select = 0;
                        self.random = -1;
                        start = 0;
                        end = 0;
                        return;
                    }
                }
                console.log(seep + ".." + t + ",,," + self.random);
                self.clear = setTimeout(function() {
                    self.beganDraw(options);
                }, seep);
                index++;
                select++;
            };
            init(options);
        },
        btn = function(ctx, x, y, btncolor, options, self) {
            //抽奖按钮
            ctx.beginPath();
            ctx.fillStyle = btncolor;
            ctx.globalAlpha = 1;
            ctx.arc(x, y, 50, Math.PI * 2, 0, false);
            ctx.fill();
            ctx.isPointInPath(x, y);
            ctx.add
            ctx.save();
            ctx.restore();
            ctx.font = "20px Courier New";
            ctx.fillStyle = "#fff";
            ctx.fillText("开始抽奖", x - 40, y + 8);
        };


    exports.Dial = Dial;
    if (typeof define === "function" && define.amd) {
        define(["jquery", "base", "popup"], function($, base, Popup) {
            return Dial;
        });
    }
})(window);