基于Canvas实现的图像X射线透视特效

Canvas X-ray Images 鼠标悬停在图像上，将透视出相反季节的景象。还包含如何在canvas上绘制多边形。

canvas, 图像特效

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

window.onload = function() {

var background = document.getElementById("background");
    var foreground = document.getElementById("foreground");
    var container = document.getElementById("xray-container");
    var options = document.getElementsByClassName("option");

var xray = new XrayImage(background, foreground, 'circle', container, 0.8);

for (var i = 0, l = options.length; i < l; i++) {
        options[i].addEventListener('click', function() {
            for (var n = 0; n < l; n++) {
                removeClass(options[n], 'selected');
            }
            this.className += " selected";
            xray.shape = this.getAttribute('data-shape');
        });
    }

document.getElementsByClassName('add')[0].addEventListener('click', function() {
        xray.size += 0.1;
        xray.resize();
    });

document.getElementsByClassName('subtract')[0].addEventListener('click', function() {
        xray.size -= 0.1;
        xray.resize();
    });

document.getElementById("reverser").addEventListener('click', function() {
        xray.reverseImages();
    });

};

function removeClass(el, _class) {

if (el && el.className && el.className.indexOf(_class) >= 0) {
        var pattern = new RegExp('\\s*' + _class + '\\s*');
        el.className = el.className.replace(pattern, ' ');
    } else return false;

}

function XrayImage(bImg, fImg, shape, container, size) {

// Public properties
    this.bImg = bImg;
    this.fImg = fImg;
    this.shape = shape
    this.container = container;
    this.size = size;
    this.xrayRadius;

// Private properties
    var objRef = this;
    var x, y;
    var init, draw, clear;
    var c, ctx, clearImg;
    var canvW, canvH;
    var xrayX, xrayY;
    var timeoutCall
    var minSize = 0.4,
        maxSize = 1.2;

// Private methods
    var drawPolygon, isResizeComplete, touch, mousemove;

this.init = function() {

c = document.createElement('canvas');
        c.style.width = "100%";
        c.style.height = "100%";
        c.style.position = "absolute";
        c.style.top = "0";
        c.style.right = "0";
        c.style.left = "0";
        c.style.background = "url(" + this.bImg.src + ") no-repeat";
        c.style.backgroundSize = '100% auto';
        this.container.appendChild(c);

ctx = c.getContext("2d");

this.resize();
        this.initEvents();
        this.update();

};

this.initEvents = function() {

window.addEventListener('resize', isResizeComplete);
        c.addEventListener('touchstart', touch);
        c.addEventListener('touchmove', touch);
        c.addEventListener('mousemove', mousemove);

};

this.resize = function() {

canvW = this.container.clientWidth;
        canvH = this.container.clientHeight;

x = xrayX = canvW / 2;
        y = xrayY = canvH / 2;

ctx.canvas.width = canvW;
        ctx.canvas.height = canvH;

ctx.drawImage(this.fImg, 0, 0, canvW, canvH);

if (this.size > maxSize) this.size = maxSize;
        if (this.size < minSize) this.size = minSize;
        this.xrayRadius = Math.floor(canvH * (this.size / 2));

};

objRef.clear = function() {

ctx.clearRect(0, 0, canvW, canvH);

};

objRef.draw = function() {

var r = this.xrayRadius;

xrayX += (x - xrayX) * 0.1;
        xrayY += (y - xrayY) * 0.1;

ctx.save();
        ctx.beginPath();
        if (this.shape === 'circle') ctx.arc(xrayX, xrayY, r, 0, Math.PI * 2, true);
        else if (this.shape === 'square') ctx.rect(xrayX - r, xrayY - r, r * 2, r * 2);
        else if (this.shape === 'triangle') drawPolygon(r, 3, 30);
        else if (this.shape === 'hexagon') drawPolygon(r, 6, -90);

ctx.closePath();
        ctx.clip();
        ctx.drawImage(this.fImg, 0, 0, canvW, canvH);
        ctx.restore();

};

objRef.update = function() {

objRef.clear();
        objRef.draw();
        requestAnimationFrame(objRef.update);

};

this.stop = function() {

cancelAnimationFrame(objRef.update);

};

this.reverseImages = function() {

var f = this.fImg;
        var b = this.bImg;
        this.fImg = b;
        this.bImg = f;

c.style.background = "url(" + this.bImg.src + ") no-repeat";
        c.style.backgroundSize = '100% auto';

};

isResizeComplete = function() {

clearTimeout(timeoutCall);
        timeoutCall = setTimeout(function() {
            objRef.resize();
        }, 300);

};

touch = function(e) {

var rect = c.getBoundingClientRect();
        x = e.originalEvent.touches[0].pageX - rect.left;
        y = e.originalEvent.touches[0].pageY - rect.top;

};

mousemove = function(e) {

var rect = c.getBoundingClientRect();
        x = e.clientX - rect.left;
        y = e.clientY - rect.top;

};

drawPolygon = function(r, sides, offset) {

// http://www.storminthecastle.com/2013/07/24/how-you-can-draw-regular-polygons-with-the-html5-canvas-api/
        ctx.save();
        ctx.beginPath();
        var a = (Math.PI * 2) / sides;
        ctx.translate(xrayX, xrayY);
        ctx.rotate(offset * Math.PI / 180);
        ctx.moveTo(r, 0);
        for (var i = 1; i < sides; i++)
            ctx.lineTo(r * Math.cos(a * i), r * Math.sin(a * i));
        ctx.closePath();
        ctx.restore();

};

this.init();

}

编译

CSS

body {
    background: #222;
    padding: 32px 32px 0 32px;
    font-family: Oswald, Helvetica, sans-serif;
}
h4,
p {
    text-align: center;
    color: rgba(0, 0, 0, 0.65);
}
h4 {
    font-weight: 700;
}
a {
    color: cornflowerblue;
    text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.05);
}
img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    visibility: hidden;
    font-size: 0;
    padding: 0;
    margin: 0;
}
nav.settings {
    position: absolute;
    padding: 4px;
    border-top: pink 3px solid;
}
.fa {
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.9);
    opacity: 0.4;
}
.top {
    top: 0;
}
.right {
    right: 0;
}
.bottom {
    bottom: 0;
}
.left {
    left: 0;
}
.size-control,
.option {
    width: 30px;
    height: 30px;
    margin: 4px;
    vertical-align: top;
    cursor: pointer;
    opacity: 0.6;
    -webkit-transition: 0.25s;
    transition: 0.25s;
    position: relative;
    display: inline-block;
}
.size-control::before {
    content: '';
    position: absolute;
    height: 40%;
    width: 100%;
    top: 30%;
    background: #FFF;
}
.add::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 40%;
    left: 30%;
    background: #FFF;
}
.option.square {
    background: #FFF;
}
.option.circle {
    background: #FFF;
    border-radius: 50%;
}
.option.triangle > div {
    width: 0;
    height: 0;
    border-right: 15px solid transparent;
    border-bottom: 30px solid #FFF;
    border-left: 15px solid transparent;
    background: transparent;
}
.option.hexagon svg {
    fill: #FFF;
    width: 100%;
    height: 100%;
}
.option:hover,
.size-control:hover {
    -webkit-transition: 0.15s;
    transition: 0.15s;
    opacity: 0.9;
}
.option.selected {
    opacity: 0.9;
}
.option.selected::after {
    content: '';
    position: absolute;
    width: 30px;
    bottom: -20%;
    border-bottom: pink 3px solid;
}
.wrapper {
    position: relative;
    background: #F5F5F5;
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 40px 60px -40px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 0, 0, 0.6);
    padding-bottom: 8px;
}
#xray-container {
    overflow: hidden;
    text-size: 0;
    position: relative;
    height: auto;
    width: 100%;
    font-size: 0;
    padding: 0;
    margin: 0;
}
#background {
    position: relative;
}
@media (max-width: 800px) {
    body {
        padding: 0;
    }
}

HTML

<p>Hover to reveal another season. <a id="reverser" href="#">Reverse images</a>
    </p>

Canvas X-ray Images 鼠标悬停在图像上，将透视出相反季节的景象。还包含如何在canvas上绘制多边形。

canvas, 图像特效

编辑器支持Emmet

快捷键

Canvas X-ray Images 鼠标悬停在图像上，将透视出相反季节的景象。还包含如何在canvas上绘制多边形。

canvas, 图像特效

使用HTML5 Canvas实现仿PS图像油画滤镜特效

基于Canvas实现的网孔连接背景图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：