20行js代码制作网页刮刮乐

分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码
效果如下

盖伦.jpg

刮刮乐.gif

HTML部分
<body>
        ![](img/gailun.jpg)
        <canvas id="canvas" width="400" height="300"></canvas>
    </body>

没什么要特别注意的
为了效果加了些CSS样式

CSS部分
<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
            img{
                width: 400px;
                height: 300px;
                left: 200px;
                position: absolute;
                z-index: -1;
            }
            canvas{
                margin-left:200px;
            }
        </style>
注意

1.为了清除浏览器自带效果加了

*{
            margin: 0;
            padding: 0;
        }

2.img需要在灰布下面,加了z-index;
3.图片绝对定位


js部分
分析下逻辑

1.鼠标按下移动相应区域刮开
2.鼠标抬起改变鼠标位置不接着刮开

js代码
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var  context =  canvas.getContext(‘2d‘);
            //画蒙布
        context.beginPath();
        context.fillStyle= ‘grey‘
        context.fillRect(0,0,400,300);
        //鼠标按下开刮
        canvas.onmousedown=function(){
            canvas.onmousemove = function(){
                //获取鼠标坐标
                var x = event.clientX;
                var y  = event.clientY;
                //destination-out             显示原来的不在后来区域的部分
                context.globalCompositeOperation = "destination-out";
                context.beginPath();
                context.arc(x-200,y,30,0,Math.PI*2);
                context.fill();
            }
        }
        //鼠标抬起不刮开
        canvas.onmouseup=function(){
            canvas.onmousemove = function(){
            }
        }
        </script>

需要注意的是

1.图片和画布左移了200px,所以圆的起点坐标相对于获取位置减了200px;
2.globalCompositeOperation是画布的一个功能作用是设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上,还有其余10种写法

学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!

时间: 2024-10-24 08:08:24

20行js代码制作网页刮刮乐的相关文章

大神手把手教你写一个页面模板引擎,只需20行Javascript代码!

只用20行Javascript代码就写出一个页面模板引擎的大神是AbsurdJS的作者,下面是他分享的全文,转需. 不知道你有木有听说过一个基于Javascript的Web页面预处理器,叫做AbsurdJS.我是它的作者,目前我还在不断地完善它.最初我只是打算写一个CSS的预处理器,不过后来扩展到了CSS和HTML,可以用来把Javascript代码转成CSS和HTML代码.当然,由于可以生成HTML代码,你也可以把它当成一个模板引擎,用于在标记语言中填充数据. 于是我又想着能不能写一些简单的代

20行Python代码爬取王者荣耀全英雄皮肤

引言 王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了.我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成. 准备工作 爬取皮肤本身并不难,难点在于分析,我们首先得得到皮肤图片的url地址,话不多说,我们马上来到王者荣耀的官网: 我们点击英雄资料,然后随意地选择一位英雄,接着F12打开调试台,找到英雄原皮肤的图片地址: 接着,我们切换一下英雄的皮肤,会发现图片地址没有明显的变化,只是最后的数字序号改变了,我们将两

你相信么,只需一个函数5行JS代码即可在Javascript中实现完整的AOP功能

你相信么,只需一个函数5行JS代码即可在Javascript中实现完整的AOP功能, 你相信么,在JavaScript只需一个函数5行代码即可实现完整的面向方面AOP编程功能.这5行代码的功能包括: 无限层次的函数无害拦截 函数执行前拦截 检查函数的参数值 重新设定函数的参数值 函数执行后拦截 检查函数执行后的返回结果 重新设定函数的返回结果 虽然动态函数式语言的效率是一个存在的问题,但是对于它的高度灵活性,简直让人令人惊叹不已,剧赞. 这个小小的函数源自于和爱明兄的一次讨论:在javascri

如何用20行Python代码打造一个微信群聊助手?

今天要教大家一个黑科技,20行代码实现自己定制的微信群聊助手,可以用来活跃群气氛,好多群主创建完群后,拉完一群人,之后就一片寂静,有个群聊助手,就可以帮忙活跃群里气氛,通过今天在自己的微信上有一大批好友的公测,效果还可以.(ps:其实最大胆感受还是,这货比我还会撩妹,撩起妹来一套一套的,晒一波自动撩妹图) 废话不说了,具体操做如下: 1.安装python环境,python2.x或着python3.x都行对此程序无影响 2.mac自带python,只需要安装python的itchat库即可 pip

18 行 JS 代码编一个倒时器

有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的插件.虽然有许多很棒的时钟插件,但如果使用原生 JavaScript 实现,那你将得到以下好处: 代码将是轻量级的,因为它没有依赖关系. 你的网站会表现得更好,因为你不需要加载外部脚本和样式表. 你将会有更高的可控性,因为你将按照想要的时钟行为的方式来创建它(而不是找一个趋向你想法的插件). 所以事

5行js代码搞定导航吸顶效果

一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点简单的样式 <style> *{ margin: 0; padding: 0; } body{ height: 2000px; background-image: linear-gradient(-180deg, #15f09d 0%, #25A0FF 50%, #fca72b 100%); }

20 行python代码抓取网页中所有JPG图片

#!/usr/bin/python import re import urllib def getHtml(url): page = urllib.urlopen(url) html = page.read() return html def getImg(html): reg = r'src="(.*?\.jpg)" width' imgre = re.compile(reg) imglist = re.findall(imgre, html) num = 0 for imgurl

利用10行js代码实现上下滚动公告效果

解决方案 1. HTML 先建一个div层作为公告显示区,里面包裹一个公告列表(ul); <div class="notice"> <ul> <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li> <li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li> <li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告</li> <li

360自动抢票还不够,几行js代码设置无人值守

360就是牛逼哄哄的...... 但是最近在使用360浏览器抢票的时候还是发现了一些体验不好的地方,比如搞着搞着就退出了登录,有时候能帮你自动登录进去,但是自动登录之后又不会帮你自动开始抢.然后验证码几次失败之后 流程就停住了, 所以必须的有人看守. 由于360浏览器是使用Chrome内核 而且提供了调试功能,所以我们写一小段js让360达到无人值守抢票的目的 setInterval(function () { if ($('.username').html() != undefined &&am