1.1.0 • Published 4 years ago
canvas-film-date v1.1.0
canvas-film-date
胶卷日期渲染组件
安装
$ npm i canvas-film-date
# 或者
$ yarn add canvas-film-date
DEMO
import FilmDate from './canvas-film-date'
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const img = document.createElement('img')
canvas.id = 'canvas'
img.src = './assets/c.jpg'
// img.src = './assets/2.jpg'
img.onload = async() => {
canvas.width = img.width
canvas.height = img.height
canvas.style.width = '100%'
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
// 渐变 DEMO
var canvas1 = document.createElement('canvas')
var ctx1 = canvas1.getContext('2d')
var gradient1 = ctx1.createLinearGradient(0, 0, 390, 0)
gradient1.addColorStop('0', 'magenta')
gradient1.addColorStop('0.5', 'blue')
gradient1.addColorStop('1.0', 'red')
/**
* 胶卷日期渲染
*
* @Class FilmDate
* @param {Object} inputCanvas 输入画布
* @param {string} text 日期文本
* @param {string} color 字体颜色
*
* @param {Object} font 字体
* @param {string} font.family 字体族名称
* @param {string} font.src 字体路径(同域)
* @param {string} font.weight 字重
* @param {string} font.style 字体样式
*
* @param {Object} shadow 阴影
* @param {string} shadow.color 阴影颜色
* @param {Number} shadow.blur 阴影模糊阶数
* @param {Number} shadow.offsetX 水平方向偏移量
* @param {Number} shadow.offsetY 垂直方向偏移量
*
* @param {Array} gradients 渐变
*
* @method render() 渲染日期,返回渲染后的canvas
*/
const FimoFilmDate = new FilmDate({
inputCanvas: canvas,
text: '19 04 20',
color: '#DC7611',
font: {
family: 'EHSMB',
src: './assets/font/EHSMB.woff',
// family: 'technology',
// src: './assets/font/technology.woff',
weight: 'normal',
style: 'normal',
},
shadow: {
color: '#5D5516',
blur: 10,
offsetX: 2,
offsetY: 8,
},
// gradients: [gradient1],
})
const fimlDateCanvas = await FimoFilmDate.render()
document.body.appendChild(fimlDateCanvas)
}