canvas操作单个像素

最新推荐文章于 2022-08-08 12:46:55 发布

玄晓乌屋

最新推荐文章于 2022-08-08 12:46:55 发布

阅读量435

点赞数

分类专栏： canvas 笔记文章标签： canvas 像素

本文链接：https://blog.csdn.net/qq_42881675/article/details/98500870

版权

笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

canvas

0 篇文章 0 订阅

订阅专栏

基本操作

mdn的像素学习链接
暂时没有找到canvas直接进行单个像素的操作，但是在canvas上下文中存在方法getImageData来生成一个可操作性的图像对象ImageData。

其中，ImageData.data 存储了图片各个像素的rgba值，可以直接修改，然后从新渲染到canvas上。

麻烦的是canvas的缩放不能直接渲染ImageData，所以需要2个canvas元素，一个用来存储图片，一个用来缩放存储图片的canvas！

想要对图片进行像素级别的操作，就要放大图片。以下是放大一个20*30像素的ImageData对象后随机给各个像素填充颜色的基本操作，方法系数是20倍：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
   	 <div class="map">
        <canvas id="data" hidden width="20" height="30"></canvas>
        <canvas id="map" width="400" height="600"></canvas>
      </div>
    <script src="./app.js"></script>
  </body>
</html>

app.js：


var map = document.getElementById('map')
var data = document.getElementById('data')
var mctx = map.getContext('2d')
var dctx = data.getContext('2d')
var imgData = dctx.createImageData(20, 30)

function render() {
  var row = 30,
    col
  do {
    col = 20
    do {
    // 根据行、列读取某像素点的R/G/B/A值的公式：
    // imageData.data[((行数-1)*imageData.width + (列数-1))*4 - 1 + 1/2/3/4];
      imgData.data[((row - 1) * imgData.width + (col - 1)) * 4 - 1 + 1] =
        Math.floor(Math.random() * 1000) % 255
      imgData.data[((row - 1) * imgData.width + (col - 1)) * 4 - 1 + 2] =
        Math.floor(Math.random() * 1000) % 255
      imgData.data[((row - 1) * imgData.width + (col - 1)) * 4 - 1 + 3] =
        Math.floor(Math.random() * 1000) % 255
      imgData.data[((row - 1) * imgData.width + (col - 1)) * 4 - 1 + 4] =
        Math.floor(Math.random() * 1000) % 255
    } while (col-- > 0)
  } while (row-- > 0)

// 关闭平滑过渡，如果不关闭，放大后的像素会很模糊
  mctx.imageSmoothingEnabled = false
  mctx.mozImageSmoothingEnabled = false
  mctx.webkitImageSmoothingEnabled = false
  mctx.msImageSmoothingEnabled = false

  dctx.putImageData(imgData, 0, 0)

  mctx.drawImage(data, 0, 0, 20, 30, 0, 0, 400, 600)
}

setInterval(render, 1000)

玄晓乌屋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas操作单个像素

基本操作mdn的像素学习链接暂时没有找到canvas直接进行单个像素的操作，但是在canvas上下文中存在方法getImageData来生成一个可操作性的图像对象ImageData。其中，ImageData.data 存储了图片各个像素的rgba值，可以直接修改，然后从新渲染到canvas上。麻烦的是canvas的缩放不能直接渲染ImageData，所以需要2个canvas元素，一个用来存...
复制链接

扫一扫