Canvas仿照图片，高仿 画出点阵图

一个机会普及了一波Canvas的用法，获益匪浅，当然其中也回顾了之前的知识

• 容器一定是要用 <canvas id="xxx"> 标签， 用 div 标签是不行的，[canvas]元素本身没有绘制能力仅仅是图形容器。
• getContext()方法返回一个用于在画布上绘图的环境，提供了用于在画布上绘图的方法和属性
• drawImage 把一张图片绘制在画布里。ctx.drawImage(image, 0, 0) ,img等同于引入的图片路径,0 , 0 就是绘制图片容器左上角的位置。第二，第三个参数可以随便写，可以理解为图片的位置定位。
• getImageData(0, 0, image.width, image.height) ,0, 0 如上面所说就是取得图片左上角的定位，width, height 就是该绘制图形的宽高。
• • getImageData 返回最重要的数据就是data里的阵列。那里面都是每个像素点的rgba颜色数据【a对应的值0-255; 0 是透明的，255 是完全可见的】，每个像素点都占有4位，以此排开在阵列里。
• ctx.fillStyle 相当于在画布上设置该画笔的颜色，填充绘画的颜色、渐变或模式。
• ctx.fillRect(0, 0, image.width, image.height) 方法绘制“已填色”的矩形。默认的填充颜色是黑色

题外话，第一次觉得数学模型能力对编程的重要性，请原谅我这渣渣

position = (image.width * h + w) * 4, 我理解了好久……哎，终于明白了

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

![ddd.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d3c0d7d8505e4ee78f98692a2bbd8e10~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=782&h=495&s=80901&e=jpg&b=ffffff)
var image = new Image();
image.src = "/ns/d1.jpg";

image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);
  
  var r = ctx.getImageData(0, 0, image.width, image.height);
  var imageData = r.data;
  
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(0, 0, image.width, image.height); 

  var gap = 6;
  for (var h = 0; h < image.height; h+=gap) {
    for(var w = 0; w < image.width; w+=gap){
      var position = (image.width * h + w) * 4;
      var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
      if(r+g+b==0){
        ctx.fillStyle = "#000";
        ctx.fillRect(w,h,4,4);
      }
    }
  }
}

参考（大佬）：juejin.cn/post/696347…

结语

前端交流QQ群：249620372 ---- FRONT-END-JS前端

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习