原生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实现div居中示例
Apr 17 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
layui表格内容溢出的解决方法
Sep 06 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(3) php 函数
2010/02/15 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
js 页面执行时间计算代码
2009/03/04 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
Python标准库内置函数complex介绍
2014/11/25 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python 读取串口数据的示例
2020/11/09 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
学生宿舍管理制度
2014/01/30 职场文书
生产文员岗位职责
2014/04/05 职场文书
难忘的一天教学反思
2014/04/30 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
论文致谢词范文
2015/05/14 职场文书
体育部部长竞选稿
2015/11/21 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
python基础之while循环语句的使用
2021/04/20 Python
进行数据处理的6个 Python 代码块分享
2022/04/06 Python