canvas 刮刮乐 撕衣服 源代码
来源:互联网 发布:java工作流引擎jpbm 编辑:程序博客网 时间:2024/03/29 16:18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<canvas id="canvas" width="240" height="240" style="background-image: url(烤箱.jpg)"></canvas>
</body>
<script src="jquery-2.1.4.js"></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//1、绘制一个铺满整个画布的矩形
ctx.fillStyle = "rgb(211,211,211)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.globalCompositeOperation = "destination-out";
//当用户点击了指定位置,并拖动才能实现刮的效果
$("canvas").on("mousedown", function () {
$("canvas").on("mousemove", function (e) {
//e.pageX,e.pageY:获取该点位于浏览器中的坐标
//1、计算该点位于canvas画布中的坐标
var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;
ctx.beginPath();
ctx.arc(x, y, 20, 0, 2 * Math.PI);
ctx.fill();
//2、判断当前刮出的像素点个数是否一斤达到画布的总像素点的一半
//判定该像素点被刮出的条件:rgba中a的值为0
//data是一个数组,保存了画布中每一个像素点的rgba的值
var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
var number = 0;
for (var i = 0; i < data.length; i += 4) {
//判断该像素点的rgba中a的值是否为0,如果为0,表示该点被刮出
if (data[i + 3] == 0) {
//表示该像素点被刮出
number++;
}
}
//3、判断刮出的像素点的个数满足画布的一半,清空画布
if (number >= canvas.width * canvas.height / 2) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
$("canvas").off("mousemove");
}
});
})
.on("mouseup mouseleave", function () {
$("canvas").off("mousemove");
});
</script>
</html>
- canvas 刮刮乐 撕衣服 源代码
- Android之Canvas撕衣服
- 撕衣服
- Android 撕衣服(刮刮乐游戏)
- 撕衣服小游戏代码
- 撕衣服小游戏原理
- 撕衣服源码
- 撕衣服小案例
- android撕衣服应用介绍
- 模拟撕衣服的代码
- Android撕衣服小案例
- Android应用《撕开美女衣服》的实现过程及源代码
- Android 多媒体开发学习之撕衣服
- Android 仿美女撕衣服效果
- Androidx学习笔记(76)--- 撕衣服
- iPhone撕衣服游戏-图片擦除
- 宅男神器——撕衣服
- 55.模拟撕衣服游戏编辑图片
- 我的物联网综合知识之创建app版前端
- 后数组是否是二叉搜索树的后序
- 【Bzoj1798】维护序列seq
- GCD用法
- localtime && time zone 修改 linux系统时间
- canvas 刮刮乐 撕衣服 源代码
- centos Ipython安装
- 响应式布局1
- HDU 2544 最短路
- Switch的的case同时付多个值的写法
- RxJava与RxAndroid学习博文整理
- VS2012新增include路径
- 后盾网ThinkPHP微博项目
- 【LeetCode】69. Sqrt(x)