canvas 实现刮刮乐
在解决问题前，我们先来了解一下 canvas 标签
canvas 是 html5 出现的新标签，像所有的 dom 对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js 能够调用它来进行绘图。
context是一个封装了很多绘图功能的对象，获取这个对象的方法是 :
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
1
2
3
canvas元素绘制图像的时候有两种方法，分别是:
ctx.fill()//填充
ctx.stroke()//绘制边框
1
2
style:在进行图形绘制前，要设置好绘图的样式
ctx.fillStyle()//填充的样式
ctx.strokeStyle()//边框样式
1
2
ctx.fillRect(x, y, width, height)
绘制一个填充的矩形
ctx.clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。
ctx.beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
ctx.closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
ctx.stroke()
通过线条来绘制图形轮廓。
ctx.fill()
通过填充路径的内容区域生成实心的图形。
ctx.fill();与ctx. stroke()是对应的，一种是填充，一种是描线
ctx.arc()
画圆弧，有五个参数（x, y, 半径, 起始角度，结束角度，是否逆时针）
ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制圆
ctx.arc(75,75,35,0,Math.PI,false); // 口(顺时针)半圆
1
2
更多属性详情请点击这里。
代码实现
实现原理
首先，我们要禁用页面的鼠标选中拖动的事件，就是不运行执行选中操作。
var bodyStyle = document.body.style;
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';
接着我们定义图片类，获取canvas元素，并设置背景和位置属性。我们在本例中用到两张随机照片，每次刷新随机一张图片作为背景。
监听图片加载事件，定义gray颜色。
监听鼠标事件并画出图像。
js 代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>演示：使用HTML5实现刮刮卡效果</title>
<style type="text/css">
.demo{width:320px; margin:10px auto 20px auto; min-height:300px;}
.msg{text-align:center; height:32px; line-height:32px; font-weight:bold; margin-top:50px}
</style>
</head>
<body>
<div id="main">
<div class="msg">刮开灰色部分看看，<a href="javascript:void(0)" onClick="window.location.reload()">再来一次</a></div>
<div class="demo">
<canvas></canvas>
</div>
</div>
<script type="text/javascript">
var bodyStyle = document.body.style;
//禁用页面的鼠标选中拖动的事件，就是不运行执行选中操作
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';
var img = new Image();
var canvas = document.querySelector('canvas');
canvas.style.position = 'absolute';
var imgs = ['p_0.jpg','p_1.jpg'];
var num = Math.floor(Math.random()*2);
img.src = imgs[num];
img.addEventListener('load', function(e) {
var ctx;
var w = img.width,
h = img.height;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop;
var mousedown = false;
function eventDown(e){
e.preventDefault();
mousedown=true;
}
function eventUp(e){
e.preventDefault();
mousedown=false;
}
function eventMove(e){
e.preventDefault();
if(mousedown) {
if(e.changedTouches){
e=e.changedTouches[0];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
with(ctx) {
beginPath()
arc(x, y, 10, 0, Math.PI * 2);
fill();
}
}
}
console.log(w)
canvas.width=w;
canvas.height=h;
canvas.style.backgroundImage='url('+img.src+')';
ctx=canvas.getContext('2d');
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, w, h);
// 在前面银色图像下面画图
ctx.globalCompositeOperation = 'destination-out';
canvas.addEventListener('touchstart', eventDown);
canvas.addEventListener('touchend', eventUp);
canvas.addEventListener('touchmove', eventMove);
canvas.addEventListener('mousedown', eventDown);
canvas.addEventListener('mouseup', eventUp);
canvas.addEventListener('mousemove', eventMove);
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
项目demo请点击这里。
在这里再拓展一个canvas画图的实例——页面时钟
详细的解释在文中已有注释。
js代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="500" style=""></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function drawClock(){
context.clearRect(0,0,500,500);
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hours = now.getHours();
//小时必须获取浮点类型 (小时+分钟/60)
hours = hours+min/60;
var hours = hours>12?hours-12:hours;
context.lineWidth = 1;
context.strokeStyle = "blue";
context.beginPath();
context.arc(250,250,200,0,360,false);
context.closePath();
context.stroke();
for(var i=0;i<60;i++){
context.save();
context.beginPath();
context.lineWidth = 3;
context.strokeStyle = "#00aac5";
context.translate(250,250);
context.rotate(i*6*Math.PI/180);
context.moveTo(0,-180);
context.lineTo(0,-190);
context.closePath();
context.stroke();
context.restore();
}
for(var i=0;i<12;i++){
//保存当前环境的状态
context.save();
context.lineWidth = 7;
context.strokeStyle = "#000";
// 转移原点
context.translate(250,250);
// 旋转
context.rotate(i*30*Math.PI/180);
context.beginPath();
context.moveTo(0,-160);
context.lineTo(0,-190);
context.closePath();
context.stroke();
// 返回之前保存过的路径状态和属性
context.restore();
}
// 绘制时针
context.save();
context.lineWidth = 5;
context.strokeStyle = "#000";
context.beginPath();
context.translate(250,250);
context.rotate(hours*30*Math.PI/180);
context.moveTo(0,-130);
context.lineTo(0,10);
context.closePath();
context.stroke();
context.restore();
// 绘制分针
context.save();
context.lineWidth = 3;
context.strokeStyle = "#000";
context.beginPath();
context.translate(250,250);
context.rotate(min*6*Math.PI/180);
context.moveTo(0,-140);
context.lineTo(0,10);
context.closePath();
context.stroke();
context.restore();
// 绘制秒针
context.save();
context.lineWidth = 1;
context.strokeStyle = "#ff0000";
context.beginPath();
context.translate(250,250);
context.rotate(sec*6*Math.PI/180);
context.moveTo(0,-160);
context.lineTo(0,15);
context.closePath();
context.stroke();
context.restore();
}
// 1s 画一次并清除上一次图案
setInterval(drawClock,1000);
</script>
</body>
</html>
---------------------
作者：小皮咖
来源：CSDN
原文：https://blog.csdn.net/weixin_38788347/article/details/78239704
版权声明：本文为博主原创文章，转载请附上博文链接！
canvas 实现刮刮乐的更多相关文章
- 游戏的套路你知道吗？ H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- canvas刮刮乐
这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...
- 【Android界面实现】使用Canvas对象实现“刮刮乐”效果
在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...
- HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...
- canvas刮刮乐游戏等
裁剪 ctx.clip():当前路径外的区域不再绘制 <canvas id="cans" width=500 height=500></canvas> &l ...
- canvas 写一个刮刮乐抽奖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas之刮刮乐
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...
- canvas刮刮乐效果（pc端&H5、zepto-touchmove）
一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;&quo ...
随机推荐
- Holer服务端软件使用
用户可以下载 holer-server.zip 搭建自己的Holer服务端. 1. 搭建Holer服务端准备工作 (1) 准备一台Linux系统或者Windows系统主机: (2) 安装Java 1. ...
- MyPython
目录 Python,那些不可不知的事儿 Python简介 Python环境搭建 从Hello World开始 Python中的数据类型 函数 模块 面向对象 More Python,那些不可不知的事儿 ...
- fpc软排线焊接
事情是这样的,早前买的5寸树莓派的屏,基本没咋用过,前两天掏出来点亮了发现屏幕有条虚线. 然后我就寻思是不是排线松了,结果手贱,拔的时候把排线撕断了一截,fpc40pin,我撕断了11pin. 因为以 ...
- linux /dev/mapper/centos-root目录莫名其妙被占满
shell命令df -h查看磁盘占用情况,发现/dev/mapper/centos-root莫名其妙被沾满: 这是因为,系统有文件被删除,而进程还活着,因而造成还占用空间的现象.1.使用lsof |g ...
- Oracle错误——tablespace 'XXXX' does not exist
错误 在使用IMP命令导入Oracle数据的时候,因为导出数据的数据库表空间和导入数据的数据库表空间不同,导致导入数据失败,出现:tablespace 'XXXX' does not exist 在网 ...
- Bootstrap3基础 栅格系统 页面布局随 浏览器大小的变化而变化
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- Python3 tkinter基础 Scale orient 横竖 resolution单步步长 length 长度 tickinterval 指示刻度
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- windows 10, v1903 正式版下载
一.简体中文版 cn_windows_10_business_editions_version_1903_x64_dvd_e001dd2c.iso sha1:bc6176bee6130 ...
- P2495 [SDOI2011]消耗战
思路 虚树上DP 虚树相当于一颗包含了所有询问的关键点信息的树,包含的所有点只有询问点和它们的LCA,所以点数是\(2k\)级别的,这样的话复杂度就是\(O(\sum k)\),复杂度就对了 虚树重点 ...
- MockMvc模拟对controller进行单元测试
本文为博主原创,未经允许不得转载: MockMvc实现了对Http请求的模拟,能够直接使用网络的形式,转换到Controller的调用,这样可以使得测试速度快.不依赖网络环境, 而且提供了一套验证的 ...