<!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. css3 ---2 属性的选择器

    存在和值属性选择器1:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何. [name]{ background: pink; } <!DOCTYPE html& ...

  2. Java中Arrys数组常用的方法

    Arrys常用方法 1.toString() Arrays.toString(arr)        //打印数组的内容,观察数组元素的值 2.sort() Arrays.sort(arr);     ...

  3. activeMQ消息队列安装配置

    1.  下载 到官网下载最新版本,有windows版本和linux版本的. http://activemq.apache.org/download.html 2.   windows下部署 Activ ...

  4. 今天介绍一个渐变的方法，在shell里面自动生成注释简介

    在编辑sh脚本时,我经常在shell中写一些注释.今天我介绍一种渐变方法,它可以在每次vim shell脚本时自动在shell中生成注释和其他信息. 让我们共享一个shell脚本模板文件,将其复制到用 ...

  5. JavaSE_11_File类、递归

    1.1 概述File类 java.io.File 类是文件和目录路径名的抽象表示,主要用于文件和目录的创建.查找和删除等操作. 1.2 构造方法 public File(String pathname ...

  6. filebeat+redis+logstash+elasticsearch+kibana搭建日志分析系统

    filebeat+redis+elk搭建日志分析系统 官网下载地址:https://www.elastic.co/downloads 1.下载安装filebeat wget https://artif ...

  7. iOS程序两中启动图方式和一些坑LaunchImage 和 Assets.xcassets(Images.xcassets)

    一.通过LaunchScreen.storyboard 作启动图 1>在LaunchScreen.storyboard中拖拽一个imageView放上启动图片 注意:记得勾选右边的 User a ...

  8. Spark-内存管理调优

    这篇文章主要是对官网内容学习过程的总结,大部分是原文,加上自己的学习笔记!!! spark 2.0+内存模型 调优内存使用时需要考虑三个因素: 对象使用的内存数量(您可能希望您的整个数据集都能装入内存 ...

  9. 老师的blog整理 .网络编程部分 .网络编程部分 前端部分 django基础部分

    老师的blog整理 .网络编程部分 .网络编程部分 前端部分 django基础部分   老师的blog整理 python基础部分: 宝哥blog: https://www.cnblogs.com/gu ...

  10. ThinkCMF框架任意内容包含漏洞复现

    1. 漏洞概述 ThinkCMF是一款基于PHP+MYSQL开发的中文内容管理框架,底层采用ThinkPHP3.2.3构建. 利用此漏洞无需任何权限情况下,构造恶意的url,可以向服务器写入任意内容的 ...