刮刮乐的实现

Html

Css


    特等奖

* {
	margin:0;
}
#card {
	width:320px;
	height:568px;
	margin:0 auto;
	background:url(img/g.jpg) no-repeat;
	background-size:320px 568px;
	position:relative;
}
#myCanvas {
	/*border:2px solid green;
	*/
	position:absolute;
	left:28px;
	top:30px;
}
#p1 {
	position:absolute;
	left:28px;
	top:30px;
	height:131px;
	width:260px;
	font-size:40px;
	text-align:center;
	line-height:131px;
	color:orange;
}

function randomNum(m, n) {
    return Math.floor(Math.random() * (n - m + 1) + m);

}
var arr = ["特等奖", "一等奖", "二等奖", "二等奖", "谢谢惠顾",
    "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾"
];
//随机下标
var index = randomNum(0, arr.length - 1);
var p1 = document.getElementById("p1");
//显示奖项
p1.innerHTML = arr[index];
var canvas = document.getElementById("myCanvas");
var cardDiv = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
//涂色 (刮刮乐)
context.fillStyle = "darkgray";
context.fillRect(0, 0, canvas.width, canvas.height);
//添加鼠标按下事件
canvas.onmousedown = function() {
    //鼠标移动事件
    canvas.onmousemove = function(e) {
        //事件对象
        var event1 = e || window.event;
        //获取鼠标的位置
        var x = event1.offsetX;
        var y = event1.offsetY;
        //设置图形组合方式 保留不重合部分
        context.globalCompositeOperation = "destination-out"

//画圆
        context.beginPath();
        context.arc(x, y, 20, 0, Math.PI * 2, true);
        context.fill();
        //如果刮过部分超过80%,则全部刮掉
        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        var colors = imageData.data; //获取图形像素点数组
        var count = 0; //存储透明区向像素点的个数
        for (var i = 0; i < colors.length; i += 4) {
            //获取透明度的值 colors[i + 3]
            if (colors[i + 3] == 0) {
                count++;
            }
        }
        if (count > colors.length / 4 * 0.8) {
            //清空整个画布内容
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

}
}
//添加鼠标松开事件
canvas.onmouseup = function() {
    canvas.onmousemove = null;
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

刮刮乐的实现



代码描述：刮刮乐的实现使用canvas

2

最新

发表评论全部评论

暂时没有评论！

海伦凯勒0

2017/6/21 10:42:22

这个函数循环好复杂还要计算啊

伊子莫0

2017/6/22 17:32:18

仔细研究一下，应该能看懂的

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

宇宙你

相关代码

刮刮乐的实现

最新