原生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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
实例详解Node.js 函数
Jun 10 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 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
PHP中soap的用法实例
2014/10/24 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
农场厂长岗位职责
2013/12/28 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
为Centos安装指定版本的Docker
2022/04/01 Servers