https://github.com/wanglin2/simulatecssbackgroundincanvas

在canvas中模拟css的background相关样式
https://github.com/wanglin2/simulatecssbackgroundincanvas

Last synced: 3 months ago
JSON representation

在canvas中模拟css的background相关样式

• Host: GitHub
• URL: https://github.com/wanglin2/simulatecssbackgroundincanvas
• Owner: wanglin2
• Created: 2023-02-01T07:14:20.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-01T08:11:21.000Z (almost 3 years ago)
• Last Synced: 2025-08-19T22:32:29.856Z (5 months ago)
• Language: JavaScript
• Size: 9.77 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# simulateCSSBackgroundInCanvas

在`canvas`中模拟`css`的`background-size`、`background-position`、`background-repeat`三个属性的部分效果。单位仅支持`px`、`%`。

## 使用

```js

import drawBackgroundImageToCanvas from './index.js'

let width = 500

let height = 500

let img = '/1.jpg'

let canvas = document.createElement('canvas')

canvas.width = width

canvas.height = height

drawBackgroundImageToCanvas(ctx, width, height, img, {

  backgroundRepeat: 'repeat-y',

  backgroundSize: '60%',

  backgroundPosition: 'center center'

}, (err) => {

  if (err) {

    // 失败

  } else {

    // 成功

  }

})

```