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()
}
相关推荐
你很易烊千玺4 小时前
日常练习-数组 字符串常用的场景
前端·javascript·字符串·数组
存在的五月雨5 小时前
Vue3项目一些语法
前端·javascript·react.js
大家的林语冰5 小时前
Node 2026 发布,JS 三大新功能上线,最后一个奇偶版本
前端·javascript·node.js
三*一6 小时前
Mapbox GL JS 自研面要素整形工具开发实录
开发语言·javascript·arcgis·ecmascript
我的世界洛天依6 小时前
胡桃讲编程|续篇!用高数 + JS ES262 硬核解构:求乐正绫的值
javascript
棉猴7 小时前
python海龟绘图之画布与窗口
javascript·python·html·setup·turtle·海龟绘图·screensize
AI_paid_community7 小时前
25k Star 登顶 GitHub:这个专门吃 K 线图长大的 AI,让我意识到之前三年都在裸奔
javascript·claude
gjwjuejin9 小时前
前端埋点第二弹:那些年我们踩过的坑,和填坑的正确姿势
javascript
我叫黑大帅9 小时前
通过白名单解决 pnpm i 报错 Ignored build scripts
前端·javascript·面试