HTML5 Canvas阴影和相交交互动效 - 踏得网

Shadowing without intersecting，以鼠标所在位置为光源所生成的阴影效果。

canvas, shadow

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d", {
  alpha: false
});

const shadowCanvas = document.createElement("canvas");
const shadowContext = shadowCanvas.getContext("2d", {
  alpha: true
});

const source = [200,200];

const points = [
  [100, 100],
  [200, 150],
  [150, 200],
  
  [400, 200],
  [500, 300],
  [450, 350],
  [400, 250],
  
  [500, 500],
  [500, 550],
  [300, 550],
  [350, 500],
  
  [200, 600],
  [400, 650],
  [300, 700],
  [200, 750],
  
  [600, 200],
  [650, 150],
  [700, 500],
  [650, 550],
  
  [800, 100],
  [850, 100],
  [850, 800],
  [800, 800]
];

const polygons = [
  [0,1,2],
  [3,4,5,6],
  [7,8,9,10],
  [11,12,13,14],
  [15,16,17,18],
  [19,20,21,22]
];

function update(t) {
  
}

function render(t) {
  context.lineWidth = 1;  
  context.fillStyle = "white";
  context.fillRect(0,0,canvas.width,canvas.height);
  for (let polygon of polygons) {
    
    for (let index = 0; index < polygon.length; index++) {
      const startPoint = polygon[index];
      const endPoint = polygon[(index + 1) % polygon.length];
      const start = points[startPoint];
      const end = points[endPoint];
      
      const sdx = start[0] - source[0];
      const sdy = start[1] - source[1];
      const sdirection = Math.atan2(sdy,sdx);
      const sdistance = Math.sqrt(sdx * sdx + sdy * sdy);
      
      const edx = end[0] - source[0];
      const edy = end[1] - source[1];
      const edirection = Math.atan2(edy,edx);
      const edistance = Math.sqrt(edx * edx + edy * edy);
      
      const far = Math.max(canvas.width, canvas.height);
      
      context.beginPath();
      context.moveTo(start[0],start[1]);
      const ax = source[0] + Math.cos(sdirection) * far * far;
      const ay = source[1] + Math.sin(sdirection) * far * far;
      const bx = source[0] + Math.cos(edirection) * far * far;
      const by = source[1] + Math.sin(edirection) * far * far;
      context.lineTo(ax, ay);
      context.lineTo(bx, by);
      context.lineTo(end[0],end[1]);
      
      context.closePath();
      context.strokeStyle = "black";
      context.stroke();
      context.fillStyle = "black";
      context.fill();
    }
    
    context.beginPath();
    for (let index = 0; index < polygon.length; index++) {
      const startPoint = polygon[index];
      const endPoint = polygon[(index + 1) % polygon.length];
      const start = points[startPoint];
      const end = points[endPoint];
      context.moveTo(start[0],start[1]);
      context.lineTo(end[0],end[1]);
    }
    context.closePath();
    context.strokeStyle = "black";
    context.stroke();
    context.fillStyle = "black";
    context.fill();
  }
  
  context.beginPath();
  context.arc(source[0],source[1],5,0,Math.PI * 2);
  context.fillStyle = "black"
  context.fill();
  
  shadowContext.clearRect(0,0,canvas.width,canvas.height);
  shadowContext.drawImage(canvas, 0, 0);
    
  context.fillStyle = "grey";
  context.fillRect(0,0,canvas.width,canvas.height);
  
  // Draws shadow
  context.globalAlpha = 0.25;
  context.globalCompositeOperation = "multiply";
  context.drawImage(shadowCanvas, 0, 0);
  
  context.globalAlpha = 1.0;
  context.globalCompositeOperation = "source-over";
  for (let polygon of polygons) {
    context.beginPath();
    for (let index = 0; index < polygon.length; index++) {
      const startPoint = polygon[index];
      const endPoint = polygon[(index + 1) % polygon.length];
      const start = points[startPoint];
      const end = points[endPoint];      
      //context.moveTo(start[0],start[1]);
      context.lineTo(end[0],end[1]);
    }
    context.closePath();
    context.lineWidth = 4;
    context.lineCap = "round";
    context.strokeStyle = "black";
    context.stroke();
    
    // WTF! Why this does not work?
    context.fillStyle = "black";
    context.fill();
  }
  
}

let frameID;
function frame(t) {
  update(t);
  render(t);
  frameID = requestAnimationFrame(frame);
}

function resize() {
  shadowCanvas.width = canvas.width = canvas.offsetWidth;
  shadowCanvas.height = canvas.height = canvas.offsetHeight;
}

function mouseMove(e) {
  source[0] = e.clientX;
  source[1] = e.clientY;
}

function start() {
  addEventListener("mousemove", mouseMove);
  addEventListener("resize", resize);
  dispatchEvent(new Event("resize"));
  frameID = requestAnimationFrame(frame);
}

start();

编译

CSS

HTML