人家都三胎了,你还没女朋友?那来画一个!

人家都三胎了,你还没女朋友?那来画一个!

技术杂谈小彩虹2021-08-20 8:19:23170A+A-

这是我参与更文挑战的第1天,活动详情查看: 更文挑战

前言

今天是六一节,就在昨天朋友圈被一条消息刷屏并成为热搜!即:

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

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

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

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

src=http___n.sinaimg.cn_sinacn22_759_w959h600_20180914_3918-hkahyhx0179488.jpg&refer=http___n.sinaimg.jpg

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

1000.jpg

于是我想着给大家 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_srccolorbg_color分别表示描绘gf的图片的url、gf的背景以及画布的大背景,分别有默认值

2.获取画布

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

默认是将idcanvascanvas元素作为画布,可自己更改;同时获取上下文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);

通过ctxfillStylefillRect方法填充画布

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,主要是防止有些颜色的地方即rgb非全0,避免造成有颜色的地方不填充,可自己调整

7.女神出现

drawGF()

调用drawGF后,你的女神成功出现了!如图

src=http___pic.51yuansu.com_pic3_cover_02_76_43_5a362339d8d26_610.jpg&refer=http___pic.51yuansu.jpg 还可以换个图和其他颜色

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

image.png

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的使用;

备注:

  1. 灵感参考自 juejin.cn/post/696347…
  2. 文中代码和所用资料可到一下地址查看:github.com/jCodeLife/r…
  3. 新手小白,难免有跑偏。有不正确的,希望批评指出,我会及时更正,感谢!!

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们