Javascript 很有趣的由复选框拼成的小绵羊图标

通过下面的小画板，可以自动绘制由单选框组成的图标。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

//Variables
var ww, wh, sizeCheckbox, checkboxes, container, canvas, mouse, drawsX = [],
    drawsY = [],
    resetTime;

//Init/reset function
var init = function() {
    ww = window.innerWidth;
    wh = window.innerHeight;

container = document.getElementById("container");
    container.innerHTML = "";

canvas = document.getElementById("paint");
    canvas.width = ww / 4;
    canvas.height = wh / 4;
    ctx = canvas.getContext("2d");
    ctx.lineWidth = 5;
    ctx.lineJoin = "round";

var _isDown = false;
    mouse = {};
    canvas.addEventListener("mousemove", function(e) {
        mouse.x = e.offsetX == undefined ? e.layerX : e.offsetX;
        mouse.y = e.offsetY == undefined ? e.layerY : e.offsetY;

if (_isDown) {
            drawing(mouse.x, mouse.y);
            draw();
        }

});
    canvas.addEventListener("mousedown", function() {
        drawsX.push("true");
        drawsY.push("true");
        _isDown = true;
    });
    canvas.addEventListener("mouseup", function() {
        drawsX = [];
        drawsY = [];
        _isDown = false;
    });

document.getElementsByTagName("button")[0].addEventListener("mouseup", clearScene);

createCheckbox();
    clearScene();
    var _img = new Image();
    _img.src = img;
    ctx.drawImage(_img, 0, 0, _img.width, _img.height, 0, 0, canvas.width, canvas.height);
    draw();
}

var clearScene = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx2.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0, j = checkboxes.length; i < j; i++) {
        checkboxes[i].checked = false;
    }
};

//Append checkboxes in body
var createCheckbox = function() {
    var _template = document.createElement("input");
    _template.setAttribute("type", "checkbox");

container.appendChild(_template);

sizeCheckbox = {
        width: document.getElementsByTagName("input")[0].offsetWidth,
        height: document.getElementsByTagName("input")[0].offsetHeight
    };
    container.innerHTML = "";

for (var i = 0, j = parseInt(ww / sizeCheckbox.width); i < j; i++) {
        for (var k = 0, l = parseInt(wh / sizeCheckbox.height); k < l; k++) {
            container.appendChild(_template.cloneNode(true));
        }
    }

checkboxes = document.getElementsByTagName("input");

canvas2 = document.createElement("canvas");
    canvas2.width = parseInt(ww / sizeCheckbox.width);
    canvas2.height = parseInt(wh / sizeCheckbox.height);
    ctx2 = canvas2.getContext("2d");
}

var drawing = function(x, y) {
    drawsX.push(x);
    drawsY.push(y);
};

var draw = function() {

//Draw in canvas
    for (var i = 0, j = drawsX.length; i < j; i++) {
        ctx.beginPath();
        if (drawsX) {
            ctx.moveTo(drawsX[i - 1], drawsY[i - 1]);
            ctx.lineTo(drawsX[i], drawsY[i]);
        }
        ctx.closePath();
        ctx.stroke();
    }

ctx2.drawImage(ctx.canvas, 0, 0, canvas2.width, canvas2.height);
    if (typeof ctx2.getImageData == "function") {
        _img = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);
        for (var i = 0, j = _img.data.length; i < j; i += 4) {
            if (_img.data[i + 3] > 200) {
                checkboxes[i / 4].checked = true;
            }
        }
    }

};

window.onresize = function() {
    resetTime = clearTimeout(resetTime);
    resetTime = setTimeout(function() {
        init();
    }, 500);
};

//Sorry for that but cross-domain origin sucks
var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABKCAMAAAB6mgEgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTY4N0RDNzVCRjUwMTFFNDlCQzhDNzJCMzdFNjAzRTgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTY4N0RDNzRCRjUwMTFFNDlCQzhDNzJCMzdFNjAzRTgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmRpZDo0RjQxNEEyNDUwQkZFNDExOTg1RkZCNzY1Q0Q1NDc0RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0RjQxNEEyNDUwQkZFNDExOTg1RkZCNzY1Q0Q1NDc0RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqVdmqcAAAAYUExURfT09B8eHra0tUZERWxqa5GPkNfW1v///7l+zYAAAAAIdFJOU/////////8A3oO9WQAABEBJREFUeNq8WYmW2yAMHHTl//+4Eodjx+AA2Ve325eSrAZdoyN4/YcHix83IjP8PQhMlbJgmKTE/pfQ+VQDxwYINDFzYoW/EoNL8xMrcomaZE0F3IQFqyCQREAAsL86HVoW6z8agJQMAe73IE6YA4lb5kv6bx+C7fR23NvlupOYJf5UfVwZMJPSyaQDkDC+P0J23P6Fy2ff7qekKqz1OH+Ss4HtEQTkxo9LBtRXg1poeL1B2BdFuSEIpaYrlDARGdY7bsr1QZB0KQukBwJ9NhellWxzRbo3ZcYAxNyFsqgI6+D8yBd85p14qNhrTROPZdxtYqkLosXhq3ymHq7lYjiTzNteuEDTHslS5L6LVdbCcXFQmOAGQowNBORs0viHs07u1uT/037GyzIISDlTQwreDMcgIsf1KVyNDogsYlhFcP7BLQ3ycVHn/KYuamLpeCzojhrru+jjvThEN+YmE6TK4chehMBWWQSQhqIXkAEHjUEahvsB2T7ZaCia6aHlOYVydVqO3HzrUCGH8QnEkh6mxK4ehYQ0EiNzvRXL5MuGSn5IVdE3iK1jXAgV1LjKU90KpTkTysXxspOJpyTGu26VFzkhrv3LiEtnnn5+6Z3qwbSLMbhfF2Rbk4E3T8cHyDKnfAPBHWSZU3Y0MdkO4UFLgFPHVpOXO0w6HcFTmlQ2wx/75KJJxaBtEExoov2686MmdMmTWt9+SEb6noy1iNHf0so5u9HKcdrnrhrDKHyLMlPgPM3UMsq0T/UljrwtdfGwOmedWR113CMPsW2uzy13TK3ReElm+kujiNKAKy5t+LLrS3W3PLnW6QMfM2OpMmC27SguCdCi2dLlwvg6zUy6Jc/2xdsximM4/doPyRJTR4yx5DT4uUzA69eO+zw/lVygx2WBbjulNhA+PvSYDBNUtxbO/AUEvM2STRB6bkU3FHdc0ioTvq6inBTUsOeQ+OknwS0QiLe18Rv2wxO9Zt12ycXQX3E8FudFxrf59aD3ebU9V1tTBAs7SJ9fgKDUJNNh9biRGayiWLyDsRnvOOFaKUq0uE2NdVqUGGF8WYLE2i6uxE+OHIrIfYAnZzfuj50bhWWTiCg29sK52UBYzZMznlOKBq3nDasnhsN9n9EeQbzQlX0v82lX4mkdO2gOZtep8QnD7KVSX7yd9jhTD4LiYMQLFYutiolOTbR4agtjCaBS6TuaEYl9jVuIqwYiU4PNI4hfNMxWm0HExFzKXgiP4hOaiPwGUgEg+vErykWDAvLaBkkVJLYW8tnCNhsGwC+aBIjLyE3Ozex5Y+OH6uFHPzg+leiy2CXyp5xIjRAea5SJ+oMxJVEMq9TdzMUXKOSHfKzUtkDaPEFtp/UBUobMH0GqGLEuSF3Lmf6JJlyHVu1qQiiL2m3uaiCg9rXZfcVJTsMEbOdJUWXEfZk20/ROf1wy7ekLxXgX053TPwEGAF0ZreIbYU36AAAAAElFTkSuQmCC";
init();

编译

CSS

HTML

通过下面的小画板，可以自动绘制由单选框组成的图标。

编辑器支持Emmet

快捷键

通过下面的小画板，可以自动绘制由单选框组成的图标。

Datepickk.js 一款很棒的日期选择器插件

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：