HTML5-canvas实例:刮刮乐游戏
实现方法:
(1)利用canvas画布,fillRect()描绘出一个矩形(不是透明),定位盖在某个标签如div上面(这个标签写着中奖的信息)
(2)globalCompositeOperation = 'destination-out';利用此属性,手指划过画布,arc(x,y, radius, 0, Math.PI*2, true)绘画圆形,那么这个圆形会把之前描绘出的矩形穿透,看到div标签的内容
globalCompositeOperation属性:
globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
值 | 描述 |
---|---|
source-over | 默认。在目标图像上显示源图像。 |
source-atop | 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 |
source-in | 在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。 |
source-out | 在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。 |
destination-over | 在源图像上方显示目标图像。 |
destination-atop | 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。 |
destination-in | 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。 |
destination-out | 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。 |
lighter | 显示源图像 + 目标图像。 |
copy | 显示源图像。忽略目标图像。 |
source-over | 使用异或操作对源图像与目标图像进行组合。 |
如下图,蓝色是目标图像(就是矩形),红色就是源图像(即手指划过的圆形)
从图中可以看出,globalCompositeOperation = 'destination-out'就是我们要的属性
例子完整代码:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>demo</title><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/><style type="text/css">.wraper{width: 300px;height: 100px;position: relative;margin: 150px auto;}.inner{width: 300px;height: 100px;background: #AA0707;color: #fff;font-size: 36px;line-height: 100px;text-align: center;}#j_canvas{position: absolute;left: 0;top: 0;}</style> </head> <body><div class="wraper"><div class="inner">恭喜您中奖</div><canvas id="j_canvas" width="300" height="100"></canvas></div><script type="text/javascript">var scratchGame = (function(){var target = document.getElementById('j_canvas'),ctx = target.getContext('2d'),w = target.width,h = target.height,radius = 15,target_offset_x = target.getBoundingClientRect().left,target_offset_y = target.getBoundingClientRect().top,isTouch = false; return{init:function(){ctx.fillStyle = '#999';ctx.fillRect(0, 0,w,h);//属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。 ctx.globalCompositeOperation = 'destination-out';// 事件 target.addEventListener('touchstart', this.eventDown,false);target.addEventListener('touchmove', this.eventMove,false);target.addEventListener('touchend', this.eventUp,false);},eventDown:function(e){e.preventDefault();isTouch = true;},eventUp:function(e){e.preventDefault();isTouch = false;},eventMove:function(e){e.preventDefault();if(!isTouch||!e.touches.length) return;var touch = e.touches[0],x = touch.pageX - target_offset_x,y = touch.pageY - target_offset_y;ctx.beginPath(); ctx.arc(x,y, radius, 0, Math.PI*2, true); ctx.fill(); }}})();scratchGame.init();</script> </body> </html>
转载于:https://www.cnblogs.com/focuslgy/p/4293534.html
HTML5-canvas实例:刮刮乐游戏相关推荐
- html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
- HTML5 Canvas核心技术:图形.动画与游戏开发
<HTML5 Canvas核心技术:图形.动画与游戏开发> 基本信息 原书名:Core HTML5 Canvas: Graphics, Animation, and Game Develo ...
- [译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
- HTML5/Canvas太空射击类小游戏源码
下载地址 JavaScript HTML5/Canvas太空射击类小游戏源码,非常值得学习的一款js射击小游戏代码,美术有点老旧,但是代码是完全开源的,有参考价值. dd:
- html5 canvas简易版捕鱼达人游戏源码
插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...
- html5上色游戏制作,怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
- html5刮奖效果,HTML5 Canvas实战之刮奖效果
近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...
- 怎样用HTML5 Canvas制作一个简单的游戏
为了让大家清楚HTML5制作游戏的简单流程,所以先了制作一个非常简单的游戏,来看一看这个过程. 游戏非常简单,无非就是英雄抓住怪物就得分,然后游戏重新开始,怪物出现在地图的随机位置,英雄初始化在地 ...
- 使用 HTML5 Canvas 标签的贪吃蛇游戏
https://thoughtbot.com/blog/html5-canvas-snake-game 保罗·詹森 2009 年 12 月 31 日 更新于 2019年3 月 9 日 这篇文章最初发 ...
- HTML5 canvas 实例
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
最新文章
- android 定时语音,android 定时语音天气播报
- java标签组件命名_Java——标签组件:JLabel
- 虚拟机下挂载CentOS 镜像并配置yum本地镜像源
- javabirdge php_PHP-Java-Bridge使用笔记
- Hibernate查询技术(2)
- 面向对象与面向过程对比
- J 位操作练习 (Java)
- 游戏蛮牛Unity 用户文档
- 夏普Sharp MX-B6581D 一体机驱动
- git查看stash里面的具体内容
- 三菱M80操作介绍_三菱PLC电脑上仿真操作步骤
- Golang学习+深入(十三)-goroutine/channal
- 考研必备 | 百度网盘网页视频在线倍速播放
- 【Appium】逍遥模拟器命令memuc功能大全【命令启动】
- 第一个GoogleTest(gtest)项目实验日记
- 26万人的巨复杂考勤自动核算,比亚迪搞定了!
- ImportError: cannot import name ‘open_code‘ from ‘io‘ (unknown location)解决方案
- 基于开源SATA核的PCIE-SATA设计
- 假设用于通信的电文仅由8个字母组成,字母在电文中出现的频率分别为0.07, 0.19, 0.02, 0.06, 0.32, 0.03, 0.21, 0.10. 试为这8个字母设计赫夫曼编码.
- Compose ConstraintLayout 详讲
热门文章
- 深入理解position:relative 与 position:absolute(divb相对于diva进行绝对定位)
- 课外扩展:使用RADIUS来集中管理***服务器(2)
- linux s g文本替换问题
- Image Semantic Segmentation之DeepLab两个坑
- 【Python-ML】集成多数投票分类器-训练评估调优
- Java实现算法导论中求解模线性方程解(基于最大公约数欧几里得扩展算法)
- 算法导论之排序和顺序统计学
- Leetcode 137. 只出现一次的数字 II 解题思路及C++实现
- ubuntu下安装lamp环境
- 通信经典书籍(转载)