Javascript:使用canvas画二维码矩阵

矩阵是由0和1组成的数组。

0-白色

1-黑色

javascript 复制代码
/**
 * 
 * @param matrix Array
 * @param size Int
 * @param padding Int
 * @param transparentBackground Boolean
 * @returns {string}
 */
function createQRCodeCanvas(matrix, size, padding, transparentBackground) {
  size = size || 3
  padding = padding === undefined ? 3 : padding
  const width = Math.sqrt(matrix.length)
  const canvasWith = width * size + padding * 2

  const canvas = document.createElement('canvas')
  canvas.width = canvasWith
  canvas.height = canvasWith

  const ctx = canvas.getContext('2d')
  if(!transparentBackground) {
    ctx.fillStyle = 'rgb(255,255,255)'
    ctx.fillRect(0, 0, canvasWith, canvasWith)
  }
  ctx.fillStyle = 'rgb(0,0,0)'

  for (let y = 0; y < width; y++) {
    for (let x = 0; x < width; x++) {
      const point = y * width + x
      if (matrix[point] === 1) {
        ctx.fillRect(padding + x * size, padding + y * size, size, size)
      }
    }
  }
  return canvas.toDataURL()
}
相关推荐
木易 士心23 分钟前
Promise深度解析:前端异步编程的核心
前端·javascript
excel35 分钟前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
zero13_小葵司1 小时前
在Vue项目中构建后端配置的动态路由及权限控制体系
前端·javascript·vue.js
GISer_Jing1 小时前
前端框架篇——Vue&React篇
前端·javascript
子兮曰1 小时前
WebSocket 连接:实现实时双向通信的前端技术
前端·javascript·websocket
jump_jump4 小时前
超长定时器 long-timeout
前端·javascript·node.js
我登哥MVP5 小时前
HTML-CSS-JS-入门学习笔记
javascript·css·笔记·学习·html
Mintopia5 小时前
架构进阶 🏗 从 CRUD 升级到“大工程师视野”
前端·javascript·全栈
光影少年5 小时前
vue生态都有哪些?
前端·javascript·vue.js