原生JavaScript实现刮刮乐


Posted in Javascript onSeptember 29, 2020

本文实例为大家分享了JavaScript实现刮刮乐的具体代码,供大家参考,具体内容如下

原理

鼠标按住移动的时候,实现刮刮乐的效果,那就是鼠标按下的同时鼠标移动,那就清除画布。松开鼠标,鼠标移动不再清除画布了,那就得清除事件。

canvas画布

1、获取画布元素

var canvas = document.getElementById('canvas');

2、获取绘图对象getContext

var ctx = canvas.getContext('2d');

3、画线

ctx.lineWidth = 3;//线宽
ctx.strokeStyle = 'red';//线条颜色
//开始的位置 moveTo(x,y);
//结束的位置lineTo(x,y)
//执行stroke()

4、矩形ctx.rect(x,y,width,height);

ctx.rect(0,0,300,150);
ctx.fillStyle = '#ccc';//填充的颜色
ctx.fill();//执行
ctx.clearRect(e.clientX,e.clientY,20,20);//清除矩形

页面

1、页面结构

<canvas id="canvas" width="300" height="150" style="border: 1px solid #ccc;"></canvas>
<div class="prize">谢谢惠顾</div>

2、样式

.prize {
 width: 300px;
 height: 150px;
 text-align: center;
 line-height: 150px;
 margin-top:-150px;
 color: red;
 font-size: 20px;
}

3、动画

//获取画布元素
 var canvas = document.getElementById('canvas');
 // 获取绘图对象
 var ctx = canvas.getContext('2d');
 ctx.lineWidth = 3;//线宽
 ctx.strokeStyle = 'red';//线条颜色
 //开始的位置 moveTo(x,y);
 //结束的位置lineTo(x,y)
 //执行stroke()

 //矩形
 ctx.rect(0,0,300,150);
 ctx.fillStyle = '#ccc';//填充的颜色
 ctx.fill();//执行
 ctx.clearRect(e.clientX,e.clientY,20,20);
 // 按下
 canvas.onmousedown = function (e){
  //移动
  canvas.onmousemove = function (e) {
   // ctx.lineTo(e.clientX,e.clientY);
   // ctx.lineTo(100,100)
   // ctx.stroke();
   ctx.clearRect(e.clientX,e.clientY,20,20);//清除
  }
 }
 canvas.onmouseup = function (e) {
  canvas.onmousemove = null;
 }
 // 改变中奖信息
 var arr = ['一个亿','现金500','100元话费','腾讯视频VIP月卡','谢谢惠顾'],
  prize = document.querySelector('.prize'),
  random = Math.floor(Math.random()*arr.length);
 prize.innerText = arr[random];

完整源码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  /*----------js刮刮乐------------*/
  .prize {
   width: 300px;
   height: 150px;
   text-align: center;
   line-height: 150px;
   margin-top:-150px;
   color: red;
   font-size: 20px;
  }
 </style>
</head>
<body>
<!--js刮刮乐-->
<canvas id="canvas" width="300" height="150" style="border: 1px solid #ccc;"></canvas>
<div class="prize">谢谢惠顾</div>

<script>
 // ------------js刮刮乐-----------
 //获取画布元素
 var canvas = document.getElementById('canvas');
 // 获取绘图对象
 var ctx = canvas.getContext('2d');
 ctx.lineWidth = 3;//线宽
 ctx.strokeStyle = 'red';//线条颜色
 //开始的位置 moveTo(x,y);
 //结束的位置lineTo(x,y)
 //执行stroke()

 //矩形
 ctx.rect(0,0,300,150);
 ctx.fillStyle = '#ccc';//填充的颜色
 ctx.fill();//执行
 ctx.clearRect(e.clientX,e.clientY,20,20);
 // 按下
 canvas.onmousedown = function (e){
  //移动
  canvas.onmousemove = function (e) {
   // ctx.lineTo(e.clientX,e.clientY);
   // ctx.lineTo(100,100)
   // ctx.stroke();
   ctx.clearRect(e.clientX,e.clientY,20,20);//清除
  }
 }
 canvas.onmouseup = function (e) {
  canvas.onmousemove = null;
 }
 // 改变中奖信息
 var arr = ['一个亿','现金500','100元话费','腾讯视频VIP月卡','谢谢惠顾'],
  prize = document.querySelector('.prize'),
  random = Math.floor(Math.random()*arr.length);
 prize.innerText = arr[random];
 // ------------js刮刮乐-----------
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
原生JavaScript实现拖动校验功能
Sep 29 #Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 #Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 #Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 #Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 #Javascript
JS中队列和双端队列实现及应用详解
Sep 29 #Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 #Javascript
You might like
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
如何利用php+mysql保存和输出文件
2006/10/09 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
php自动获取关键字的方法
2015/01/06 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python中的闭包函数
2018/02/09 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Django 拆分model和view的实现方法
2019/08/16 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
模特职业生涯规划范文
2014/02/26 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
学校2014年度工作总结
2014/12/06 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
python实现高效的遗传算法
2021/04/07 Python
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python