<!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. Java开发系列-电子邮箱

    概述 电子邮箱就是在邮箱服务器上开启的一块空间.邮箱服务器就是一个安装在计算机的服务软件,提供有邮件服务. 邮箱的发送流程 现在tom要发送一份邮件给jerry,首先tom将邮件通过客户端连接自己设置 ...

  2. linux流量监控iftop命令安装详解

    iftop跟nload差不多,也是捕获网卡流量的命令,nload的安装见之前发布的教程:http://www.cnblogs.com/catlee/p/5703541.html 开始安装.本文以cen ...

  3. JPA默认方法查询遇到转JSON的处理

    JPA提供的findAll等查询方法在有关联的对象时 比如:在查userInfo @Entity@Table(name = "user_info")public class Use ...

  4. AM8 自定义表情包的实现方法

    AM8 自定义表情包的实现方法 效果描述 AM8 安装后,在\Activesoft\AMm8\emotions 目录内存储的是默认的表情符号.但有的时候我们需要增加一些新的表情符号,AM8 系统支持自 ...

  5. thinkphp 模板主题

    一个模块如果需要支持多套模板文件的话,就可以使用模板主题功能. 默认情况下,没有开启模板主题功能,如果需要开启,设置 DEFAULT_THEME 参数即可: 大理石平台精度等级 // 设置默认的模板主 ...

  6. 一起使用Python里for循环和dictionary字典

    1.先定义一个字典的内容 i= { 'status': 'success', 'country': '中国', 'countryCode': 'CN', 'region': 'BJ' } 2.打印字典 ...

  7. Django项目: 3.用户注册功能

    本章内容的补充知识点 导入库的良好顺序: 1.系统库 2.django库 3.自己定义的库(第三方库) redis缓存数据库的数据调用速度快,但是不利于长时间保存. mysql用于长时间存储,但是调用 ...

  8. <每日一题>题目27：插入排序(假)

    ''' 插入排序:假设元素左侧全部有序,找到自己的位置插入 ''' import random import cProfile def insert_sort(nums): for i in rang ...

  9. wpf中在style的template寻找ControlTemplate和DataTemplate的控件

    一.WPF中的两棵树 WPF中每个控件的Template都是由ControlTemplate构成,ControlTemplate包含了构成该控件的各种子控件,这些子控件就构成了VisualTree:而 ...

  10. NopCommerce3.9安装

    除非另外说明,否则本分类所有博文的NopCommerce都基于3.9版本. 用vs2015打开,其他版本的vs没试过. 首先打开解决方案,然后设置Nop.web为启动项目. 启动项目,项目即可自动编译 ...