explaingit

buuing/lucky-canvas

★ 8,710TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

JavaScript plugin that adds animated prize wheels, nine-grid pickers, and slot machines to any website or mini-app, with server-controlled odds and support for Vue, React, and WeChat.

Mindmap

mindmap
  root((lucky-canvas))
    What it does
      Prize animations
      Lottery widgets
      Canvas rendering
    Visual styles
      Prize wheel
      Nine-grid picker
      Slot machine
    Frameworks
      Vue
      React
      WeChat Mini Program
    Features
      Server-side odds
      Image and text prizes
      Mobile sharp rendering
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a spinning prize wheel to a marketing campaign page where winning odds are determined by your backend server, not exposed in the browser.

USE CASE 2

Build a scratch-card giveaway component in a Vue app with each prize configured as a mix of images, text, and background colors.

USE CASE 3

Create a consistent slot machine animation across a WeChat Mini Program and a web app using the same plugin and prize configuration.

Tech stack

TypeScriptJavaScriptVueReactCanvas APIUniAppTaro

Getting it running

Difficulty · easy Time to first run · 30min

Documentation is primarily in Chinese, English docs are listed as a work in progress.

In plain English

Lucky-canvas is a JavaScript plugin for adding lottery and prize-drawing animations to a website or app. It provides three visual styles: a spinning prize wheel, a nine-grid scratch-card style picker, and a slot machine. All three are drawn with the Canvas API, which means they render sharply on screens of any pixel density, including high-resolution mobile displays. The README is written in Chinese, this summary is based on the description, topics, and visible structure of the project. The plugin is designed to work across many different JavaScript environments without rewriting your code. There are separate npm packages for plain JavaScript, Vue, React, UniApp, Taro (a cross-platform mini-app framework), and WeChat Mini Programs. Each package wraps the same core drawing engine, so the behavior is consistent regardless of which framework you use. You configure what appears in each segment of the wheel or grid by passing in a list of prizes. Each prize can be text, an image, a background color, or a button, and you can mix these freely. The plugin supports both modes of determining a winner: the result can be decided locally in the browser before the animation starts, or you can call your own backend during the spin and wait for a server response before landing on a prize. This lets you control the actual odds from a server rather than exposing probability logic to the browser. The project is actively maintained and has English documentation listed as a work in progress. The Chinese documentation and demo site live at 100px.net. It is released under an open-source license.

Copy-paste prompts

Prompt 1
Show me how to set up lucky-canvas in a Vue 3 app with a spinning wheel that calls my backend API to determine the winning prize before the animation stops.
Prompt 2
How do I configure lucky-canvas to display both image prizes and text prizes in the same nine-grid picker layout?
Prompt 3
Walk me through adding lucky-canvas to a WeChat Mini Program project and loading the prize list from a JSON array.
Prompt 4
How do I make lucky-canvas pause the spin animation and wait for a server response before revealing the winning slot?
Open on GitHub → Explain another repo

← buuing on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.