предисловие

Сегодня 1 июня, буквально вчера круг друзей пролистал сообщением и стал горячим поиском! который:

Политбюро ЦК Коммунистической партии Китая провело заседание 31 мая. На заседании было указано, что политика рождаемости должна быть дополнительно оптимизирована, а политика, согласно которой пара может иметь троих детей, и меры поддержки должны быть реализованы.

Словом, государство проводит политику, согласно которой у пары может быть трое детей.

Как только новость была обнародована, она тут же вызвала тысячу волн в Интернете!

Пропустите здесь волны Мелалеуки... тысячи... тысячи... (потому что это не та тема, которую я хочу обсудить сегодня)

Я думаю только о вас всех, о чем я беспокоюсь, так это о том, что у всех третий ребенок, а у вас еще нет девушки

Так что я подумал дать вамnewотправить один

новая девушка

Да ладно, ничто не может сравниться с интерфейсом Xiaobai!

после долгого времени....

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

Пожалуйста, уберите его, добро пожаловать!

Кто-то здесь обязательно скажет: "Почему нет фото? Мусор!"

Принимая во внимание контроль цвета, ну, я решил нарисовать его для всех! Ничто не может сравниться с интерфейсом Xiaobai!

нарисовать девушку

1. Сначала создайте функцию drawGF

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

Функция принимает три параметраimg_src,color,bg_colorПредставляет URL-адрес изображения, изображающего gf, фон 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, эти данные хранят соответствующие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. С помощью простых упражнений я рассмотрел использование связанных с холстом API, таких как: drawImage, getImageData, fillStyle, fillRect и т. д. Следует обратить внимание на использование getImageData;

Примечание:

1. ВдохновленНаггетс.Талант/пост/696347…
2. Код и материалы, использованные в тексте, можно посмотреть по следующему адресу:GitHub.com/ie co's life/day…
3. Новичок Xiaobai неизбежно собьется с пути. Если что-то не так, надеюсь на критику укажут, и я вовремя исправлю, спасибо! !