当前位置：首页 > 网页特效 > canvas

HTML5 canvas橡皮擦擦拭效果

分类：canvas 日期：2024-05-14 点击(0) 评论(0)

HTML5 canvas橡皮擦擦拭效果

简介

##### HTML结构
该HTML5 canvas橡皮擦擦拭效果由两个canvas元素组成。

```html
<canvas id="canvas-overlay"></canvas>
<canvas id="canvas-lines"></canvas>
```
#####  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);
 
}        
```

web299.com

HTML5 canvas橡皮擦擦拭效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果