<!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. 对this的理解与总结

    this既不指向函数自身,也不指向函数的词法作用域!它指向谁完全取决于它在哪里被调用,被谁调用! 绑定规则 总体来说,this的绑定规则有: 默认绑定(严格模式/非严格模式) 隐式绑定 显式绑定 ne ...

  2. 以太坊geth客户端下的一些常用命令

    这是一个交互式的 JavaScript 执行环境,在这里面可以执行 JavaScript 代码,其中 > 是命令提示符.在这个环境里也内置了一些用来操作以太坊的 JavaScript 对象,可以 ...

  3. 并发和多线程(四)--wait、notify、notifyAll、sleep、join、yield使用详解

    wait.notify.notifyAll 这三个方法都是属于Object的,Java中的类默认继承Object,所以在任何方法中都可以直接调用wait(),notifyAll(),notify(), ...

  4. Python操作MySQL以及数据库索引

    目录 python操作MySQL 安装 使用 SQL注入问题 MySQL的索引 为什么使用索引 索引的种类 主键索引 唯一索引 普通索引 索引优缺点 不会命中索引的情况 explain 索引覆盖 My ...

  5. 莫烦pytorch学习笔记(一)——torch or numpy

    Q1:什么是神经网络? Q2:torch vs numpy Numpy:NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(neste ...

  6. SpringData_02_JPQL查询、SQL查询和方法命名规则查询

    1.使用JPQL的方式查询 JPQL查询:Hibernate提供的是HQL查询,而JPA提供的是JPQL查询语言 使用Spring Data JPA提供的查询方法已经可以解决大部分的应用场景,但是对于 ...

  7. Android之AbsoluteLayout(绝对布局)

    1.属性简介 为了适配不同机型,绝对布局使用很少! android:layout_x="50dp" android:layout_y="100dp"也只有在Ab ...

  8. C++【stack/queue】用法和例子

    Stack的常用基本操作: s.push() // 压栈 s.emplace() // 插入,相当于push(目前掌握的唯一区别是emplace可以自行调用构造函数,push不行) s.empty() ...

  9. nulls_hlist原理 和 tcp连接查找

    原文链接 http://abcdxyzk.github.io/blog/2018/09/28/kernel-sk_lookup/

  10. 枚举进程，线程，堆 CreateToolhelp32Snapshot

    Takes a snapshot of the processes and the heaps, modules, and threads used by the processes.对当前系统进行一 ...