Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
In photography, is the aesthetic quality of the blur produced in the out-of-focus parts of an image produced by a lens. Bokeh has been defined as "the way the lens renders out-of-focus points of light". Differences in lens aberrations and aperture shape cause some lens designs to blur the image in a way that is pleasing to the eye, while others produce blurring that is unpleasant or distracting―"good" and "bad" bokeh, respectively. Bokeh occurs for parts of the scene that lie outside the depth of field.
css
body { background: #000; position: relative; } .canvas { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } #wrapper { display: flex; height: 100vh; width: 100vw; } .content { background: rgba(0,0,0,0.8); color: #f4f4f4; height: 200px; margin: auto; padding: 2rem; position: relative; overflow: hidden; width: 400px; z-index: 1; } a { color: #999; }
JavaScript
'use strict'; var parentEl; var c1; var c2; var ctx1; var ctx2; var canvasWidth; var canvasHeight; var sizeBase; var count; var hue; var options; var parts = []; /** * Helper function to create a HTML5 canvas and add a class to it * @return {[canvas]} */ function createCanvas() { var canvas = document.createElement('canvas'); canvas.classList.add('canvas'); return canvas; } /** * Helper function to generate a random value between min and max * @param {[int]} min [min value] * @param {[int]} max [max value] * @return {[int]} [random value between min and max] */ function rand(min, max) { return Math.random() * (max - min) + min; } /** * Helper function to generate hsla string for canvas 2d context * @param {[int]} h [hue] * @param {[int]} s [saturation] * @param {[int]} l [lightness] * @param {[float]} a [alpha] * @return {[string]} */ function hsla(h, s, l, a) { return 'hsla(' + h + ',' + s + '%,' + l + '%,' + a + ')'; } /** * Helper function used for debouncing * @param {[Function]} fn [function to debounce] * @param {[int]} delay [debounce delay] */ function debounce(fn, delay) { var timer = null; return function() { var context = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }; } function createAnimation() { sizeBase = canvasWidth + canvasHeight; count = Math.floor(sizeBase * 0.3); hue = rand(0, 360); options = { radiusMin: 1, radiusMax: sizeBase * 0.04, blurMin: 10, blurMax: sizeBase * 0.04, hueMin: hue, hueMax: hue + 100, saturationMin: 10, saturationMax: 70, lightnessMin: 20, lightnessMax: 50, alphaMin: 0.1, alphaMax: 0.5 } ctx1.clearRect(0, 0, canvasWidth, canvasHeight); ctx1.globalCompositeOperation = 'lighter'; while (count--) { //init variables for canvas context var radius = rand(options.radiusMin, options.radiusMax); var blur = rand(options.blurMin, options.blurMax); var x = rand(0, canvasWidth); var y = rand(0, canvasHeight); var hue = rand(options.hueMin, options.hueMax); var saturation = rand(options.saturationMin, options.saturationMax); var lightness = rand(options.lightnessMin, options.lightnessMax); var alpha = rand(options.alphaMin, options.alphaMax); //draw on canvas context ctx1.shadowColor = hsla(hue, saturation, lightness, alpha); ctx1.shadowBlur = blur; ctx1.beginPath(); ctx1.arc(x, y, radius, 0, Math.PI * 2); ctx1.closePath(); ctx1.fill(); } parts.length = 0; //clear parts array for (var i = 0; i < Math.floor((canvasWidth + canvasHeight) * 0.03); i++) { parts.push({ radius: rand(1, sizeBase * 0.03), x: rand(0, canvasWidth), y: rand(0, canvasHeight), angle: rand(0, Math.PI * 2), vel: rand(0.1, 0.5), tick: rand(0, 10000) }); } } function resize() { canvasWidth = c1.width = c2.width = parentEl.offsetWidth; canvasHeight = c1.height = c2.height = parentEl.offsetHeight; } function animate() { window.requestAnimationFrame(animate); ctx2.clearRect(0, 0, canvasWidth, canvasHeight); ctx2.globalCompositeOperation = 'source-over'; ctx2.shadowBlur = 0; ctx2.drawImage(c1, 0, 0); //copy canvas 1 to canvas 2 ctx2.globalCompositeOperation = 'lighter'; var i = parts.length; ctx2.shadowBlur = 15; ctx2.shadowColor = '#fff'; while (i--) { var part = parts[i]; part.x += Math.cos(part.angle) * part.vel; part.y += Math.sin(part.angle) * part.vel; part.angle += rand(-0.05, 0.05); ctx2.beginPath(); ctx2.arc(part.x, part.y, part.radius, 0, Math.PI * 2); var alpha = 0.075 + Math.cos(part.tick * 0.02) * 0.05; ctx2.fillStyle = hsla(0, 0, 100, alpha); ctx2.fill(); //make sure particles stay within canvas bounds if (part.x - part.radius > canvasWidth) { part.x = -part.radius; } if (part.x + part.radius < 0) { part.x = canvasWidth + part.radius; } if (part.y - part.radius > canvasHeight) { part.y = -part.radius; } if (part.y + part.radius < 0) { part.y = canvasHeight + part.radius; } part.tick++; } } function init() { //create canvases c1 = createCanvas(); c2 = createCanvas(); ctx1 = c1.getContext('2d'); ctx2 = c2.getContext('2d'); parentEl = document.getElementById('wrapper'); parentEl.insertBefore(c2, parentEl.firstChild); parentEl.insertBefore(c1, c2); resize(); createAnimation(); animate(); window.addEventListener('resize', debounce(function() { resize(); createAnimation(); }, 250)); } init();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas虚化背景-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号