canvas实现图片模糊、图片显示效果

Html

Css


    
    
    reset
    show

* {
	padding:0;
	margin:0;
}
#blur-div {
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
#blur-image {
	display:block;
	margin:0 auto;
	filter:blur(5px);
	-webkit-filter:blur(5px);
	-moz-filter:blur(5px);
	-ms-filter:blur(5px);
	-o-filter:blur(5px);
	position:absolute;
	left:0;
	top:0;
	z-index:0;
}
#canvas {
	display:block;
	margin:0 auto;
	position:absolute;
	left:0;
	top:0;
	z-index:100;
}
.button {
	display:block;
	position:absolute;
	z-index:200;
	width:100px;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#fff;
	border-radius:5px;
	text-decoration:none;
}
#btn-reset {
	left:50px;
	bottom:20px;
	background-color:#058;
}
#btn-show {
	right:50px;
	bottom:20px;
	background-color:#085;
}

var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;

var radius = 50;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = canvasWidth;
canvas.height = canvasHeight;

var image = new Image();
var clippingRegion = {
    x: 0,
    y: 0,
    r: radius
};
var leftMargin = 0,
    topMargin = 0;
image.src = 'https://www.jq22.com/img/cs/500x500-1.png';
image.onload = function(e) {
    $('#blur-div').css('width', canvasWidth + 'px');
    $('#blur-div').css('height', canvasHeight + 'px');
    $('#blur-image').css('width', image.width + 'px');
    $('#blur-image').css('height', image.height + 'px');
    leftMargin = (image.width - canvas.width) / 2;
    topMargin = (image.height - canvas.height) / 2;

$('#blur-image').css('top', String(-topMargin) + 'px');
    $('#blur-image').css('left', String(-leftMargin) + 'px');
    initCanvas();
}

function initCanvas() {
    var theleft = leftMargin < 0 ? -leftMargin : 0;
    var thetop = topMargin < 0 ? -topMargin : 0;
    clippingRegion = {
        x: Math.random() * (canvas.width - 2 * radius - 2 * theleft) + radius + theleft,
        y: Math.random() * (canvas.height - 2 * radius - 2 * thetop) + radius + thetop,
        r: radius
    };
    draw(image, clippingRegion)
}

function draw(image, clippingRegion) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    setClippingRegion(clippingRegion);
    context.drawImage(image, Math.max(leftMargin, 0), Math.max(topMargin, 0), Math.min(canvas.width, image.width), Math.min(canvas.height, image.height), leftMargin < 0 ? -leftMargin : 0, topMargin < 0 ? -topMargin : 0, Math.min(canvas.width, image.width), Math.min(canvas.height, image.height));
    context.restore();
}

function setClippingRegion(clippingRegion) {
    context.beginPath();
    context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false);
    context.clip();

}

function reset() {
    initCanvas();
}

function show() {
    var timer = setInterval(
        function() {
            clippingRegion.r += 20;
            if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) {
                clearInterval(timer)
            }
            draw(image, clippingRegion);
        }, 30
    )

}
canvas.addEventListener('touchstart', function(e) {
    e.preventDefault();
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas实现图片模糊、图片显示效果



代码描述：canvas实现图片模糊、图片显示效果代码

更新时间：2021-09-17 08:17:16

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

yellow kid

相关代码

canvas实现图片模糊、图片显示效果

最新