如何将着色器应用于画布(javascript）

How to apply shaders to canvas (javascript)

本文关键字：javascript 应用于      更新时间：2023-09-26

我对着色器没有任何经验。不使用javascript，也不使用任何其他语言。我在JS中看到过ThreeJS的着色器。

我想使用着色器来操纵画布的部分以进行音频可视化，使用低音滤波器和着色器。我确实设法从低音滤波器中获得了数据，但不知道如何在哪里找到香草JS或一些轻量级框架中的着色器教程。

这里有一个很好的答案：

你画你的形状，然后阴影1（内部[明亮，alplha（0.7）]），然后阴影2（外部[不那么明亮，alpha（0.3）]）。

var ctx = document.getElementById("canvasId").getContext("2d");
function drawSquare(X, Y, WaH, color) {
     ctx.beginPath();         //Draw suare
     ctx.fillStyle = color;
     ctx.fillRect(X, Y, WaH, WaH);
  
     ctx.beginPath();         //Draw shader 2
     ctx.fillStyle = "rgba(255, 255, 0, 0.3)";
     ctx.arc(X + 20, Y + 20, 12.5, 0, Math.PI * 2);
     ctx.fill();
  
     ctx.beginPath();         //Draw shader 1
     ctx.fillStyle = "rgba(255, 255, 0, 0.7)";
     ctx.arc(X + 20, Y + 20, 7.5, 0, Math.PI * 2);
     ctx.fill();
}
drawSquare(50, 50, 100, "red");
<canvas id="canvasId" width="300" height="300"></canvas>

这不是最好的，我做了我的最好的，好吗？？？？？？？

相关文章：