Vue实现刮刮乐项目

最新推荐文章于 2024-04-04 09:45:45 发布

FGGIT

最新推荐文章于 2024-04-04 09:45:45 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_47888212/article/details/128848429

版权

文章介绍了一款适用于移动手机的HTML5Canvas刮刮卡插件，支持触摸事件并提供回调功能。用户需通过npm安装lzy-scratch-card，配置包括背景图片、前景图片、尺寸、半径等参数，实现简单且效果良好。

摘要由CSDN通过智能技术生成

效果展示

请添加图片描述

文件目录

在这里插入图片描述

代码

<template>
  <div id="app">
    <div class="index-body">
      <scratch-card
        elementId="scratchpx"
        width="400px"
        height="200px"
        :moveRadius="15"
        :ratio="0.6"
        :startCallback="startCallback"
        :clearCallback="clearCallbackUp"
        coverImg="https://cdn.geement.com/sfiles/JinWei/scratch_music.png"
        :result="result"
        style="
          position: absolute;
          top: 0;
          left: 0;
          top: 42.4%;
          left: 50%;
          transform: translate(-50%, -50%);
        "
      >
      </scratch-card>
      <audio
        src="./assets/test.mp3"
        style="display: none"
        ref="audio1"
        loop="loop"
        type="audio/mp3"
      ></audio>
    </div>
  </div>
</template>

<script>
import scratchCard from "lzy-scratch-card";
let that = this;

export default {
  name: "App",
  components: { scratchCard },

  data() {
    return {
      result:
        // '<img src="https://img-blog.csdnimg.cn/df47ce85d32041cb8e1956fa8c422304.gif?x-oss-process=#pic_center" style="width:400px; height:200px" alt="">',
        '<img src="http://fgg.icu/media/112.gif" style="width:400px; height:200px" alt="">',
    };
  },

  methods: {
    //开始刮时的回调函数

    startCallback() {
      this.$refs.audio1.play();
    },
    //刮刮乐刮层全部清除后的回调函数
    clearCallbackUp() {
      this.result = '<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F26%2F20180726105208_etzyi.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1677826186&t=5b88033f4fae58f3dd0c875617f74c5f" style="width:400px; height:200px" alt="">'
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

scratchCard

功能描述

ScratchCard是一款支持移动手机的HTML5 canvas刮刮卡插件。该刮刮卡插件支持移动触摸事件，提供刮卡的回调函数，简单易用，效果非常不错。

使用前先安装插件 npm i lzy-scratch-card --save

配置参数

该Canvas刮刮卡插件的可用配置参数有：

canvasId：canvas的id。

imageBackground：背景图片（刮开后呈现的图片）。

pictureOver：前景图片。

sceneWidth：canvas的宽度。

sceneHeight：canvas的高度。

radius：清除区域的半径。

nPoints：清除区域的杂点数量。

percent：在清除多少区域之后清空canvas。

cursor：光标。

png：png格式的光标。

x：Move position x。

y：Move position y。

cur：cur格式的光标（IE使用）。

在这里插入图片描述