Pixelate.js 彩色像素数组转换成Canvas图像

Pixelate.js Color Arrays to Canvas Pixelart

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2097
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var pixelate, pixels;

pixels = [
        ["", "", "", "", "", "#000", "#000", "#000", "#000", "#000", "#000", "", "", "", "", ""],
        ["", "", "", "#000", "#000", "#fff", "#fff", "#A40D14", "#A40D14", "#fff", "#fff", "#000", "#000", "", "", ""],
        ["", "", "#000", "#fff", "#fff", "#fff", "#C9101A", "#C9101A", "#C9101A", "#C9101A", "#fff", "#fff", "#fff", "#000", "", ""],
        ["", "#000", "#A40D14", "#A40D14", "#C9101A", "#C9101A", "#EE2832", "#EE2832", "#EE2832", "#EE2832", "#C9101A", "#C9101A", "#A40D14", "#A40D14", "#000", ""],
        ["", "#000", "#A40D14", "#C9101A", "#C9101A", "#EE2832", "#EE2832", "#EE2832", "#EE2832", "#EE2832", "#EE2832", "#C9101A", "#C9101A", "#A40D14", "#000", ""],
        ["#000", "#fff", "#C9101A", "#C9101A", "#EE2832", "#EE2832", "#fff", "#fff", "#fff", "#fff", "#EE2832", "#EE2832", "#C9101A", "#C9101A", "#fff", "#000"],
        ["#000", "#fff", "#fff", "#C9101A", "#EE2832", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#EE2832", "#C9101A", "#fff", "#fff", "#000"],
        ["#000", "#fff", "#fff", "#C9101A", "#EE2832", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#EE2832", "#C9101A", "#fff", "#fff", "#000"],
        ["#000", "#fff", "#C9101A", "#C9101A", "#C9101A", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#C9101A", "#C9101A", "#C9101A", "#fff", "#000"],
        ["#000", "#A40D14", "#C9101A", "#C9101A", "#A40D14", "#A40D14", "#fff", "#fff", "#fff", "#fff", "#A40D14", "#A40D14", "#C9101A", "#C9101A", "#A40D14", "#000"],
        ["#000", "#A40D14", "#A40D14", "#A40D14", "#000", "#000", "#000", "#000", "#000", "#000", "#000", "#000", "#A40D14", "#A40D14", "#A40D14", "#000"],
        ["", "#000", "#000", "#000", "#F4CA68", "#F4CA68", "#000", "#F4CA68", "#F4CA68", "#000", "#F4CA68", "#F4CA68", "#000", "#000", "#000", ""],
        ["", "", "#000", "#F4CA68", "#FFF171", "#FFF171", "#000", "#FFF171", "#FFF171", "#000", "#FFF171", "#FFF171", "#F4CA68", "#000", "", ""],
        ["", "", "#000", "#F4CA68", "#FFF171", "#FFF171", "#FFF171", "#FFF171", "#FFF171", "#FFF171", "#FFF171", "#FFF171", "#F4CA68", "#000", "", ""],
        ["", "", "", "#000", "#F4CA68", "#FFF171", "#FFF171", "#FFF171", "#FFF171", "#FFF171", "#FFF171", "#F4CA68", "#000", "", "", ""],
        ["", "", "", "", "#000", "#000", "#000", "#000", "#000", "#000", "#000", "#000", "", "", "", ""]
    ];

$(document).ready(function() {
        return pixelate.init('.pixelart', pixels);
    });

pixelate = {
        c: "",
        ctx: "",
        d: "",
        p_size: 10,
        init: function(selector, data) {
            this.c = document.querySelector(selector);
            this.ctx = this.c.getContext('2d');
            this.d = data;
            this.set_canvas_size();
            return this.draw();
        },
        set_canvas_size: function() {
            var cols, height, width;
            cols = 0;
            $.each(this.d, function(key, val) {
                if (val.length > cols) {
                    return cols = val.length;
                }
            });
            width = cols * this.p_size;
            height = this.d.length * this.p_size;
            return $(this.c).attr('width', width).attr('height', height);
        },
        draw: function() {
            return $.each(this.d, function(row, row_data) {
                return $.each(row_data, function(col, color) {
                    var x, y;
                    if (color !== '') {
                        pixelate.ctx.fillStyle = color;
                    } else {
                        pixelate.ctx.fillStyle = 'rgba(0, 0, 0, 0)';
                    }
                    x = col * pixelate.p_size;
                    y = row * pixelate.p_size;
                    return pixelate.ctx.fillRect(x, y, pixelate.p_size, pixelate.p_size);
                });
            });
        }
    };

}).call(this);

编译

CSS

HTML

Pixelate.js Color Arrays to Canvas Pixelart

编辑器支持Emmet

快捷键

Pixelate.js Color Arrays to Canvas Pixelart

html5 canvas simplex-noise.js彩带粒子流动画

babylon.js自动生成3D地形（terrain builder）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：