<!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. JS流程控制语句 多重判断满足你各种需求 要在多组语句中选择一组来执行，使用if..else嵌套语句。

    多重判断(if..else嵌套语句) 要在多组语句中选择一组来执行,使用if..else嵌套语句. 语法: if(条件1) { 条件1成立时执行的代码} else if(条件2) { 条件2成立时执行 ...

  2. centos 7 开机优化shell

    vim  start_init.sh #!/bin/bash#####dns echo "nameserver 114.114.114.114" >/etc/resolv.c ...

  3. php实现在不同国家显示网站的不同语言版本

    首先,你的网站本身要拥有多个语言版本.不然的话你就只能用JS去转化了. 1.通过ip去定位,这个要引用到第三方的接口进行数据的完整返回,但是不知道是我的网速太慢还是什么原因,个人觉得这个方法会卡顿: ...

  4. 使用Parallel.Invoke并行你的代码

    优势和劣势 使用Parallel.Invoke的优势就是使用它执行很多的方法很简单,而不用担心任务或者线程的问题.然而,它并不是适合所有的场景.Parallel.Invoke有很多的劣势 如果你使用它 ...

  5. ubuntu挂载和挂载NTFS分区命令

    1.挂载 首先安装NTFS-3g,不过Ubuntu一般自带: sudo apt install ntfs-3g 查看分区信息: sudo fdisk -l 结果类似: /dev/sda1  *     ...

  6. 嵌入式开发—C语言面试题

    嵌入式开发—C语言面试题 源地址:http://blog.csdn.net/xdx2ct1314/article/details/7358929   1. 用预处理指令#define 声明一个常数,用 ...

  7. 纯 CSS 实现实心三角形和空心三角形

    一.实心三角形 1.代码 .div-angles{ width:; height:; border-style: solid; border-width:30px; border-color: tra ...

  8. Neo4j-Cypher语言语法

    Neo4j-Cypher语言语法 梦飞扬 2018-03-15 264 阅读 Neo4j 本文是记录Neo4j图数据库中实用的Cypher语言语法. Cypher是什么 "Cypher&qu ...

  9. Neo4j删除节点和关系、彻底删除节点标签名

    https://www.jianshu.com/p/59bd829de0de 总结提前: [1]先删关系,再删节点 [2]当记不得关系名时,type(r)可以查到关系名 [3]彻底删除节点标签名,需要 ...

  10. gethostname gethostbyname gethostbyaddr 获得主机相关信息

    网络编程里经常需要获得主机的相关信息,下面围绕相关的函数以及用到的结构来说明. 获得主机名:int gethostname( char FAR *name, //[out] Pointer to a ...