【CSS小例】像素ICON续（js版）

上篇使用Sass实现了像素ICON，为了方便以后实现更灵活的功能，本篇文章使用js实现。

实现效果

别问，我也不知道画的这是啥...

设计思路

仍然是利用box-shadow属性，将一个元素变成一个像素画的画板。

创建一个二维数组，用数组存放颜色的标记，将二维数组转换成元素的box-shadow样式。

再次开动！！！

代码实现

Html

<div class="pixel" :style="{ 'box-shadow': boxShadow }"></div>

Sass

$pixelSize: 5px;
.pixel {
  width: $pixelSize;
  height: $pixelSize;
}

尺寸

这里跟元素样式设置的尺寸一样

const pixelSize = 5

颜色数组

const colors = ['', '#f7f7f7', '#f96000']

像素点矩阵

const data_p_icon = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 0],
  [0, 0, 2, 2, 1, 2, 1, 2, 2, 2, 0, 0],
  [0, 0, 2, 2, 2, 1, 2, 1, 2, 2, 0, 0],
  [0, 0, 0, 2, 2, 2, 2, 2, 2, 0, 0, 0],
  [0, 0, 2, 2, 1, 1, 1, 1, 2, 2, 0, 0],
  [0, 0, 2, 1, 1, 1, 1, 1, 1, 2, 0, 0],
  [0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]

计算方法

const boxShadow = ref('')
const setPixel = () => {
  const res = []
  for (let y = 0; y < data_p_icon.length; y++) {
    for (let x = 0; x < data_p_icon.length; x++) {
      if (data_p_icon[y][x] > 0) {
        res.push(`${x * pixelSize}px ${y * pixelSize}px 0 ${colors[data_p_icon[y][x]]}`)
      }
    }
  }
  boxShadow.value = res.join(', ')
}
setPixel()

至此，我们完成js版的像素画，后续会利用这些代码实现更多有意思的功能。

完结散花

如发现文章内容有任何问题，请提出您的宝贵意见予以指正，感谢您的阅读。