Hi, I’m an old fish from the front end lab! A senior Internet player, focus on sharing big front-end technology, interview treasure book, learning materials, etc

preface

In the front-end development, the demand of random lottery activity we must have encountered ~

Are you still using divs to write sweepstakes layouts? Are you still worried about adaptation and performance?

Whether or not… Don’t miss this raffle kit

Results show

Christmas is coming and I want someone to let me choose gifts like this!!

Say many are tears, we still see how to achieve ~

About lucky – canvas

A Js + Canvas based [big turntable & nine grid & Slot machine] lottery, is committed to providing a powerful and professional and reliable components for the Web front end, only through simple configuration can achieve free customization, to help you quickly complete the product needs.

Lucky – Canvas features

Free configuration

Prizes/text/pictures/colors/buttons can be configured freely; Support synchronous/asynchronous sweepstakes; Probability of winning before/after controllable

Multiterminal adaptation

Support JS/TS/JQ/Vue/React/wechat mini program/UniApp/Taro, etc. And the multiple uses/representations are completely consistent

responsive

Automatically adjust the definition according to the equipment DPR; The percentage/REM/RPX attributes are supported to fit the mobile layout

Quick start experience

1. Use it in Js/JQ

Method 1: Import using script tags

< div id = "my - lucky" > < / div > < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]" > < / script > < script > const myLucky  = new LuckyCanvas.LuckyWheel('#my-lucky', { width: '200px', height: '200px', blocks: [{ padding: '10px', background: '# 869 cfa'}], prizes: [{fonts: [{text: 'thank you to patronize}], background:' # e9e8fe}, {fonts: [{text: 'IPhone 13 Pro'}], background: '# b8c5F2 '}, {fonts: [{text: '#e9e8fe'}, background: '#e9e8fe'}, {fonts: [{text: }], background: '# b8c5F2 '}, {fonts: [{text: '#e9e8fe'}, background: '#e9e8fe'}, {fonts: [{text: '#e9e8fe'}, {fonts: [{text: }], background: '# b8C5F2 '}, {fonts: [{text: '# b8C5F2 '}], background: '# b8C5F2 '}, {fonts: [{text: 'wash your socks a month'}], background: '# b8c5f2'},],}) < / script >Copy the code

Method 2: Import through import

# NPM install NPM install lucky-canvas@latest #Copy the code
import { LuckyWheel, LuckyGrid } from 'lucky-canvas' const myLucky = new LuckyWheel('#my-lucky', { width: '200px', height: '200px', blocks: [{ padding: '10px', background: '#869cfa' }], prizes: [ { fonts: [{ text: }], background: '#e9e8fe'}, {fonts: [{text: 'IPhone 13 Pro'}], background: '# b8C5F2 '}, {fonts: [{text: 'IPhone 13 Pro'}] 'fonts'}], background: '#e9e8fe'}, {fonts: [{text: '#b8c5f2'}, background: '# b8c5F2'}, {fonts: [{text: }], background: '#e9e8fe'}, {fonts: [{text: 'perfume bottle'}], background: '#b8c5f2'}, {fonts: [{text: 'empty shopping cart'}], background: '# b8c5f2'}, {fonts: [{text: 'wash your socks a month}], background:' # b8c5f2},],})Copy the code

lucky.js

const myLucky = new LuckyCanvas.LuckyGrid('#my-lucky', {
	width: '500px'.height: '500px'.// Set background -block
	blocks: [{
			padding: '10px'./ / padding
			background: '#869cfa'.// Background color
			borderRadius: '10px'// Rounded radius
		},
		{
			padding: '10px'.background: '#e9e8fe'.borderRadius: '10px'},].// Make prizes
	prizes: [{
			x: 0.// Relative coordinate x
			y: 0.// Relative coordinate y
                        // Prize picture
			imgs: [{
				src: './img/aaa.png'.// Image path
				width: '50%'.// Image width
				top: '20%'// Image location}].// Award articles
			fonts: [{
				text: 'Thank you for coming.'.// Text content
				top: '75%'// Text position}]}, {x: 1.y: 0.imgs: [{
				src: './img/bbb.png'.width: '50%'.top: '20%'}].fonts: [{
				text: 'IPhone 13 Pro'.top: '75%'}]}, {x: 2.y: 0.imgs: [{
				src: './img/ccc.png'.width: '50%'.top: '20%'}].fonts: [{
				text: '520 red envelope'.top: '75%'}]}, {x: 2.y: 1.imgs: [{
				src: './img/aaa.png'.width: '50%'.top: '20%'}].fonts: [{
				text: 'Blah blah blah blah.'.top: '75%'}]}, {x: 2.y: 2.imgs: [{
				src: './img/ccc.png'.width: '50%'.top: '20%'}].fonts: [{
				text: 'A lipstick'.top: '75%'}]}, {x: 1.y: 2.imgs: [{
				src: './img/bbb.png'.width: '50%'.top: '20%'}].fonts: [{
				text: 'Perfume bottle'.top: '75%'}]}, {x: 0.y: 2.imgs: [{
				src: './img/ccc.png'.width: '50%'.top: '20%'}].fonts: [{
				text: 'Empty shopping cart'.top: '75%'}]}, {x: 0.y: 1.imgs: [{
				src: './img/bbb.png'.width: '50%'.top: '20'}].fonts: [{
				text: 'Wash socks for a month'.top: '75%'}}]],// Lucky draw button
	buttons: [{
		x: 1.// Relative coordinate x
		y: 1.// Relative coordinates
		row: 1.// Vertically merge the grid
		col: 1.// horizontally merge the grid
		background: 'rgba (0,0,0,0)'.// Check the background color
		imgs: [{// The prize button can use pictures
			src: './img/go.gif'.width: '100%'.height: '100%',}]}],// Default style
	defaultStyle: {
		background: '#b8c5f2'// Check the background color
	},
        // Default configuration
	defaultConfig: {
		speed: 10// Peak rotation speed
	},
        // Before the lottery begins
	start: function() {
		myLucky.play()// Start the lottery
		// Assume that the interface request speed is 1s
		setTimeout(_= > {
                        // Slow notification
			myLucky.stop(Math.floor((Math.random()*6)))},1000)},// After the draw
	end: function(prize) {
		alert('Congratulations on winning:' + prize.fonts[0].text)
	}
})

Copy the code

Well, a simple lottery rotary table to achieve ~

There are more powerful attribute configuration, there is a need to know can go to the official website to learn

Document address: 100px.net/docs/grid.h… Github address: github.com/LuckDraw/lu…