canvas-marquee

a marquee component based on canvas

Installation

npm i canvas-marquee -S

Usage

import Marquee from 'canvas-marquee';
var textList = ['跑马灯', '666', '233333333',
        'javascript', 'html', 'css', '前端框架', 'Vue', 'React',
        'Angular', '测试跑马灯效果'
    ];
var opts = {
    id:'canvas',
    data:textList,
    top:20,
    offset:1,
    gap:10,
    font:'20px Arial',
    color:'#339966'
};
var marquee = new Marquee(opts);
marquee.draw();

options

Parameter | Type |Default| Description --------- | ---- | ------|----------- id | string | | the canvas element’s id data | string | | the tests to show in canvas top | function | | text top offset in canvas offset | string| 1 | text move step gap | number | 0 | text item gap color | string | | text color font | string | | text font start | string/number | left | text start point

preview