Question

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

我想使用着色器来操作画布的部分以进行音频可视化，使用低音滤镜和着色器。我确实设法从低音滤波器中获取数据，但是没有任何线索可以找到在vanilla JS或者一些轻量级框架中使用着色器找到优秀教程的方法。

Answer 1

这是一个很好的答案：

你绘制你的形状，然后是shader1（内部[明亮，alplha（0.7）]），然后是shader2（外部[不那么明亮，alpha（0.3）]）。

＆＃13;

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");

＆＃13;

<canvas id="canvasId" width="300" height="300"></canvas>

＆＃13;

这是最好的，我我最好，好吗???????

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

1 个答案: