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()
}
相关推荐
前端大白话15 分钟前
前端人必看!10个Vue3救命技巧,专治性能差、代码乱
前端·javascript·vue.js
江城开朗的豌豆19 分钟前
JavaScript篇:JavaScript中的深浅拷贝:原理、实现与应用
前端·javascript·面试
爱看书的小沐23 分钟前
【小沐学Web3D】three.js 加载三维模型(Svelte.js)
javascript·vue.js·webgl·three.js·opengl·web3d·svelte.js
江城开朗的豌豆24 分钟前
JavaScript篇:深入解析URL结构:前端开发者必备的网址知识
前端·javascript·面试
10年前端老司机1 小时前
微信小程序wxs
前端·javascript·微信小程序
洋流1 小时前
看完这篇文章后,别再说你不懂JS执行机制
javascript
贩卖黄昏的熊1 小时前
JavaScript 笔记 --- part6 --- JS进阶 (part1)
java·javascript·笔记
wangyongquan1 小时前
数组方法总结
javascript·面试
YuTao1 小时前
请求时序错乱:「后发先至」隐藏在异步请求中的“幽灵”
前端·javascript
天天扭码1 小时前
一杯柠檬水的时间 | 让你理解前端性能优化的核心武器——防抖节流 ψ(`∇´)ψ
前端·javascript·面试