HTML5 从图片提取元素动态创建万花筒图案

Kaleidoscope，JS模式提取和生成使用了jQuery.ui.touch-punch.js插件来支持touch（触摸）事件。

jQuery, pattern

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    // Setup kaleidoscope with dom elements and perhaps start coordinates
    var kaleidoscope = new Kaleidoscope90({
        peephole: document.getElementById('draggable'),
        original: $("#container img")[0],
        outputCanvas: document.getElementById('canvas'),
        x: (typeof start_x === 'undefined') ? 92 : start_x,
        y: (typeof start_y === 'undefined') ? 132 : start_y
    });
});

/**
 * Kaleidoscope90 repeats a reflected and rotated square (tile)
 * Initialize it with the necessary DOM elements
 */
var Kaleidoscope90 = function(options) {
    var $peephole,
        peepholeWidth,
        peepholeHeight,
        original,
        outputCtx,
        tileCanvas,
        tileCanvasCtx;

init(options);

function init(options) {
        $peephole = $(options.peephole);
        peepholeWidth = $peephole.width();
        peepholeHeight = $peephole.height();
        original = options.original;
        outputCtx = options.outputCanvas.getContext('2d');

tileCanvas = document.createElement("canvas");
        tileCanvas.width = peepholeWidth * 2;
        tileCanvas.height = peepholeHeight * 2;
        tileCanvasCtx = tileCanvas.getContext("2d");

$peephole.css({
            left: options.x,
            top: options.y
        });
        draw();

// Make the peephole draggable. Redraw on drag
        $peephole.draggable({
            containment: original,
            drag: draw
        });
    }

/**
     * Do the actual drawing
     */
    function draw() {
        createTile();
        fill(tileCanvas, outputCtx);
    }

/**
     * Create tile (on a temporary canvas) using copies of peephole
     * @return {canvas}	The tile
     */
    function createTile() {

var sx = $peephole.position().left,
            sy = $peephole.position().top,
            w = peepholeWidth,
            h = peepholeHeight,
            ctx = tileCanvasCtx; // Reuse of canvas (for performance optimization)

// Copy peephole unaffected
        ctx.drawImage(original, sx, sy, w, h, 0, 0, w, h);

// Mirror horizontal and draw on the right spot
        ctx.scale(-1, 1);
        ctx.drawImage(original, sx, sy, w, h, -2 * w, 0, w, h);

// Flip vertically too (quadrant roght bottom)
        ctx.scale(1, -1);
        ctx.drawImage(original, sx, sy, w, h, -2 * w, -2 * h, w, h)

// Flip hor again (for quadrant left bottom)
        ctx.scale(-1, 1);
        ctx.drawImage(original, sx, sy, w, h, 0, -2 * h, w, h)
    }

/**
     * Fill canvas with tile
     */
    function fill(tile, ctx) {

outputCtx.rect(0, 0, outputCtx.canvas.width, outputCtx.canvas.height);
        outputCtx.fillStyle = outputCtx.createPattern(tile, "repeat");
        outputCtx.fill();

}

/**
     * export data
     * @return {ImageData} Resulting graphics
     */
    function getImageData() {
        // For the future
    }

return {
        getImageData: getImageData
    }
};

编译

CSS

HTML

Kaleidoscope，JS模式提取和生成使用了jQuery.ui.touch-punch.js插件来支持touch（触摸）事件。

jQuery, pattern

编辑器支持Emmet

快捷键

Kaleidoscope，JS模式提取和生成 使用了jQuery.ui.touch-punch.js插件来支持touch（触摸）事件。

jQuery, pattern

HTML5一款漂亮的内含花朵的正方形动画背景图案

HTML5 jQuery可左右滑动拖拉的照片处理前后对比界面

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Kaleidoscope，JS模式提取和生成使用了jQuery.ui.touch-punch.js插件来支持touch（触摸）事件。