纯原生JS实现移动端刮刮乐效果。

最新推荐文章于 2025-04-17 09:00:00 发布

晨晨快跑

最新推荐文章于 2025-04-17 09:00:00 发布

阅读量4.1k

点赞数

分类专栏：技术文章标签： js 刮刮乐移动端 json对象结构 this

本文链接：https://blog.youkuaiyun.com/baidu_38027860/article/details/79854405

版权

话不多数，先上效果图：

当挂出超过百分比的时候显示整张图，都可以在构造对象中设置，有疑问可以留言，我看到的话会第一时间回复。

好，接下来先上html代码，引用的地址图片你可以随便用，路径之类的有点基础都能修改，并没有加任何难度的代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;padding: 0;
}
img{
width:600px;height:500px;
}
#canvas{
position: absolute;top:0;left:0;
}
#canvas1{
position: absolute;top:710px;left:110px;
}
</style>
</head>
<body>
<div>
<img src="1111.jpg" alt="">
<canvas id="canvas" width = "600" height="500"></canvas>
</div>
<script src="Scratch.js"></script>
<script>
var scratch = new Scratch("canvas",{ //第一个参数是canvas的id,,其他都可传可不传
width : 600,//画布的宽度，，不传为默认宽度
height: 500,//画布的高度，，不传为默认宽度
top : 0,//画布的高度偏移量。。不传为默认距离body的高度
left : 0,//画布的宽度偏移量。。不传为默认距离body的宽度
color: "red",//画布的颜色
// url : "/uploadImg/images/11111111.jpg",//上传图片路径，如果上传，则color无效
handWidth : 50,//画布的手势宽度
percent : 0.5,//完成百分比，，默认百分之50