web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
canvas
HTML5 canvas橡皮擦擦拭效果
分类:
canvas
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
##### HTML结构 该HTML5 canvas橡皮擦擦拭效果由两个canvas元素组成。 ```html
``` ##### CSS样式 为该HTML5 canvas橡皮擦擦拭效果添加下面的CSS样式。 ```html body { min-height: 100vh; background-image: url(../img/1.jpg); background-size: cover; overflow: hidden; } #canvas-overlay { position: relative; z-index: 98; opacity: 0.85; } #canvas-lines { position: absolute; top: 0; left: 0; z-index: 99; opacity: 0.05; } ``` ##### JavaScript 然后通过下面的js代码创建可交互的橡皮擦效果。 ```html var canvas = document.querySelector('#canvas-overlay'); var canvasContext = canvas.getContext('2d'); var lineCanvas = document.querySelector('#canvas-lines'); var lineCanvasContext = lineCanvas.getContext('2d'); var pointLifetime = 500; var points = []; //FILL CANVAS canvasContext.fillStyle="rgba(0, 0, 0, 0.5)"; canvasContext.fillRect(0, 0, canvas.width, canvas.height); //INIT function init() { document.addEventListener('mousemove', onMouseMove); window.addEventListener('resize', resizeCanvases); resizeCanvases(); tick(); } init(); //RESIZE CANVAS function resizeCanvases() { canvas.width = lineCanvas.width = window.innerWidth; canvas.height = lineCanvas.height = window.innerHeight; } function onMouseMove(event) { points.push({ time: Date.now(), x: event.clientX, y: event.clientY }); } function tick() { // Remove old points points = points.filter(function(point) { var age = Date.now() - point.time; return age < pointLifetime; }); drawLineCanvas(); drawImageCanvas(); requestAnimationFrame(tick); //setTimeout(() => { //tick(); //}, 1000 / 60); } function drawLineCanvas() { var minimumLineWidth = 70; var maximumLineWidth = 140; var lineWidthRange = maximumLineWidth - minimumLineWidth; var maximumSpeed = 70; lineCanvasContext.clearRect(0, 0, lineCanvas.width, lineCanvas.height); lineCanvasContext.lineCap = 'round'; lineCanvasContext.shadowBlur = 70; lineCanvasContext.shadowColor = '#000'; for (var i = 1; i < points.length; i++) { var point = points[i]; var previousPoint = points[i - 1]; // Change line width based on speed var distance = getDistanceBetween(point, previousPoint); var speed = Math.max(0, Math.min(maximumSpeed, distance)); var percentageLineWidth = (maximumSpeed - speed) / maximumSpeed; lineCanvasContext.lineWidth = minimumLineWidth + percentageLineWidth * lineWidthRange; // Fade points as they age var age = Date.now() - point.time; var opacity = (pointLifetime - age) / pointLifetime; lineCanvasContext.strokeStyle = 'rgba(0, 0, 0, ' + opacity + ')'; lineCanvasContext.beginPath(); lineCanvasContext.moveTo(previousPoint.x, previousPoint.y); lineCanvasContext.lineTo(point.x, point.y); lineCanvasContext.stroke(); } } function getDistanceBetween(a, b) { return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2)); } function drawImageCanvas() { canvasContext.globalCompositeOperation = 'source-over'; canvasContext.save(); canvasContext.fillStyle="rgb(0, 0, 0)"; canvasContext.globalAlpha = 0.009; canvasContext.fillRect(0, 0, canvas.width, canvas.height); canvasContext.restore(); canvasContext.globalCompositeOperation = 'destination-out'; canvasContext.drawImage(lineCanvas, 0, 0); } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告