中共中央政治局5月31日召开会议，会议指出，进一步优化生育政策，实施一对夫妻可以生育三个子女政策及配套支持措施。

一句话就是，国家实施一对夫妻可以生育三个子女的政策。

消息一经公布，立刻在网络上激起千层浪！

此处略过千层浪......千层浪......千层浪...... （因为这不是我今天想讨论的主题）

我心心念念只有大家，我担心的是人家都三胎了，你还没有女朋友

于是我想着给大家 ~new~ 送一个吧

new一个女朋友

说来就来，没有什么是可以难倒前端小白的！

很久以后....

class GF {
    constructor(name='Alice') {
        alert(`我是${name},我是你的女朋友噢！我也想生三胎^_^`)
    }
}
new GF() 

请拿走，不用不客气哈！

这里有人肯定会说：“怎么没有相片啊？垃圾！”

考虑到各位颜控，好吧，我决定把画出来给大家！没有什么是可以难倒前端小白的！

画个女朋友

1.首先创建一个函数drawGF

function drawGF(img_src = 'gf.jpg', color = '#000', bg_color = "#fff"){} 

函数接受三个参数img_src、color、bg_color分别表示描绘gf的图片的url、gf的背景以及画布的大背景，分别有默认值

2.获取画布

let canvas = document.querySelector('#canvas')
let ctx = canvas.getContext('2d') 

默认是将id为canvas的canvas元素作为画布，可自己更改；同时获取上下文ctx

3.将要绘制的样图放入画布

var img = new Image();
img.src = img_src;
img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0)
} 

当图片加载时，设置画布宽度等于图片宽度，设置画布高度等于图片高度。然后通过drawImage方法将图片绘制

4.获取画布的像素点阵信息

let imageData = ctx.getImageData(0, 0, img.width, img.height).data; 

需要注意：

1. getImageData返回的是一个对象，里面有个属性data，这个data存储了每个像素对应的RGBA值;
2. 由于getImageData原因，建议用服务器环境打开，否则可能出错

5.填充画布

ctx.fillStyle = bg_color;
ctx.fillRect(0, 0, img.width, img.height); 

通过ctx的fillStyle和fillRect方法填充画布

6.开始绘制和填充

let gap = 1
for (let h = 0; h < img.height; h += gap) {
    for (let w = 0; w < img.width; w += gap) {
        let position = (img.width * h + w) * 4;
        let r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
        if (r + g + b <= 510) {
            
            ctx.fillStyle = color;
            ctx.fillRect(w, h, 3, 3);
        }
    }
} 

核心思想是，将每个像素的颜色值取出，判断是不是黑色，如果是，则填充绘制即可。注意：设置成510，主要是防止有些颜色的地方即r、g、b非全0，避免造成有颜色的地方不填充，可自己调整

7.女神出现

drawGF() 

调用drawGF后，你的女神成功出现了！如图

还可以换个图和其他颜色

如：drawGF('gf2.jpg','#f40','#ccc')

8. 完整代码

function drawGF(img_src = 'gf.jpg', color = '#000', bg_color = "#fff") {
    let canvas = document.querySelector('#canvas')
    let ctx = canvas.getContext('2d')
    let img = new Image()
    img.src = img_src
    img.onload = function () {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0)
        let imageData = ctx.getImageData(0, 0, img.width, img.height).data;
        ctx.fillStyle = bg_color;
        ctx.fillRect(0, 0, img.width, img.height);
        let gap = 1
        for (let h = 0; h < img.height; h += gap) {
            for (let w = 0; w < img.width; w += gap) {
                let position = (img.width * h + w) * 4;
                let r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
                if (r + g + b <= 510) {
                    ctx.fillStyle = color;
                    ctx.fillRect(w, h, 3, 3);
                }
            }
        }
    }
} 

总结

1. 不足之处在于，性能差，而且实用性低，仅可用于剪影类图像；

2. 通过简单练习，复习了canvas相关api的使用，例如：drawImage、getImageData、fillStyle、fillRect等；其中需要注意getImageData的使用；

原文地址

https://juejin.cn/post/6968802868035846152