Vue实现刮刮乐项目

admin管理员组

文章数量:1794759

Vue实现刮刮乐项目

效果展示

文件目录

代码

代码语言：javascript代码运行次数：0运行复制

<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=".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>

代码语言：javascript代码运行次数：0运行复制

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

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

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

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

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

代码语言：javascript代码运行次数：0运行复制

<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刮刮卡插件的可用配置参数有：

代码语言：javascript代码运行次数：0运行复制

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使用）。

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2024-10-15，如有侵权请联系 cloudcommunity@tencent 删除前往查看插件函数配置事件手机

本文标签： Vue实现刮刮乐项目