<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

		<title></title>

	</head>

	<style type="text/css">

		*{

			margin: 0;

			padding: 0;

		}

		img{

			width: 80%;

			height: 80%;

		}

		html,body{

			width: 100%;

			height: 100%;

			overflow: hidden;

		}

		div{

			width: 100%;

			height: 100%;

			overflow: hidden;

		}

		canvas{

			margin: 0 auto;

			display: block;

		}

	</style>

	<body>

	<div class="box">

		<canvas id="game"></canvas>

	</div>

	</body>

	<script type="text/javascript">

		function ggl(){

			//创建画布

			var game = document.getElementById('game');

			var obj = game.getContext('2d');

			//创建图片

			var imgs = ['images/1.png','images/2.png','images/3.png','images/4.png','images/6.png','images/7.png'];

			//图片随机

			var img = imgs[Math.floor(Math.random()*imgs.length)];

			var pic= new Image;

			pic.src = img;

			pic.onload = function(){

				game.width = this.width;

				game.height = this.height;

				game.style.background = 'url('+this.src+')';

				//填充灰色矩形

				obj.fillStyle = 'gray';

				obj.fillRect(0,0,this.width,this.height);

				//核心代码 让图层可以覆盖叠加

				obj.globalCompositeOperation = 'destination-out';

				console.log('图片加载完成');

				//声明鼠标按下开关

				var off = 0;

				var startX = 0;

				var startY = 0;

				//鼠标的位置

				game.addEventListener('touchstart',function(e){

					off = 1;

					startX = this.offsetLeft;

					startY = this.offsetTop;

//					console.log(startX);

				});

				//抬起鼠标关闭

				game.addEventListener('touchend',function(e){

//					console.log(z轴动);

					off = 0;

				});

				//鼠标移动

				game.addEventListener('touchmove',function(e){

					var e=e||window.event;

//                    console.log(e.touches[0].pageX)

					if(!off) return;

					var x = e.touches[0].pageX - startX;

					var y = e.touches[0].pageY - startY;

					//绘制个圆形

					obj.beginPath();

					obj.fillStyle = 'rgba(0,0,0,0.1)';

					obj.arc(x,y,30,0,2*Math.PI);

					obj.fill();

//					console.log(x);

				})

			};

			console.log(img)

		}

		ggl();

	</script>

</html>

　　

移动端canvas刮刮乐的更多相关文章

  1. 游戏的套路你知道吗？ H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  2. H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  3. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  4. canvas刮刮乐

    这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...

  5. 【Android界面实现】使用Canvas对象实现“刮刮乐”效果

    在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...

  6. HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  7. canvas刮刮乐游戏等

    裁剪 ctx.clip():当前路径外的区域不再绘制 <canvas id="cans" width=500 height=500></canvas> &l ...

  8. canvas 写一个刮刮乐抽奖

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. canvas之刮刮乐

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  10. canvas 实现刮刮乐

    在解决问题前,我们先来了解一下 canvas 标签canvas 是 html5 出现的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js 能够调用它来进行绘图. ...

随机推荐

  1. cv2 & PIL(pillow)显示图像

    = OpenCV和PIL中显示图像方式不一样,且支持的格式也不同 = cv在显示图像时是自定义的显示窗口,而PIL中显示是调用操作系统中的默认打开程序 如: import cv2 im = cv2.i ...

  2. 查看linux的shhd端口号 netstat | grep sshd

    [root@iZ2zef51hufoaycipfxek8Z ~]# [root@iZ2zef51hufoaycipfxek8Z ~]# netstat | grep sshd [root@iZ2zef ...

  3. 关于Button控件的CommandName属性用法的一个实例

    注:本文分享于悠闲的博客,地址:http://www.cnblogs.com/9999/archive/2009/11/24/1609234.html 1.前台的代码 <%@ Page Lang ...

  4. springboot中activeMQ消息队列的引入与使用（发送短信）

    1.引入pom依赖 <!--activemq--><dependency> <groupId>org.springframework.boot</groupI ...

  5. task code

    using System; using System.Collections.Generic; using System.Threading; using System.Threading.Tasks ...

  6. mysql 一次性插入的数据量过大报错max_allowed_packet解决方法

    查询: show VARIABLES like ‘%max_allowed_packet%‘; 记录下数字(默认是一个7位) 执行语句: ; 重启服务 再查询 该数字 ,如果没变,则修改mysql的m ...

  7. JS里面function和Function的区别

    js里Function 与 function的不一样的,不仅仅是大小写的问题. 简单点说:大写的Function是一个类 ,而小写的function是一个对象. Function是一个构造器,func ...

  8. 16_k近邻算法总结

    1.k近邻算法属于分类算法 2.你的“邻居”来推断出你的类别 3.标准定义:如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则该样本也属于这个类别. 4.计算 ...

  9. File- Linux必学的60个命令

    1.作用 件内容判断文件类型,使用权限是所有用户. 2.格式 file通过探测文 file [options] 文件名 3.[options]主要参数 -v:在标准输出后显示版本信息,并且退出. -z ...

  10. PKUWC 2018 真实排名

    PKUWC2018 真实排名 题面描述 共有\(n\)个人,每个人有一个能力值,每个人的排名为所有能力值不比他小的人的个数(包括他自己). 现在有\(k\)个人能力值翻倍,但我们无法得知是哪\(k\) ...