你好互联网!
玩弄代码来制作可能很酷但没用的东西是我的爱好。
但是随着我做的越来越多，我想制作更复杂的东西，我认为 2d Canvas 上下文 已经不够了。
所以这导致我
这个问题:
是否使用某些 WebGL 2d 库(例如 Pixi.js)使逐像素操作更快？
我知道这似乎是一个愚蠢的问题，答案可能很明显，但不适合我。
我知道如果尝试制作游戏，我会获得巨大的框架改进，但是让我尝试给您举一个我打算创建的示例:
这是我的一个愚蠢的“项目”的片段
代码完全是意大利面，我没有费心去整理它，但是您可以全屏运行它，您可能会了解我打算创建的内容。
var width = 800;
var height = 400;
var canvas = document.getElementById("canv");
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, width, height);
var imageData = ctx.getImageData(0, 0, width, height);
var data = imageData.data;
var input = "Math.tan((y - height/2) / (x - width/2))*(180/Math.PI)";
var calc;
function inputChanged(inp) {
var x, y, i;
try {
eval("calc = function(x, y, i){ return " + inp.value + " }");
inp.style.cssText = "border: 2px solid green";
document.getElementById("errorLog").innerHTML = "";
draw();
} catch (e) {
inp.style.cssText = "border: 2px solid red";
document.getElementById("errorLog").innerHTML = e;
}
}
function przyklad(str) {
var polecenieElement = document.getElementById("polecenie");
polecenieElement.value = str;
inputChanged(polecenieElement);
}
function draw() {
for (var index = 0; index < data.length; index += 4) {
var i = index / 4;
var y = Math.floor(i / width);
var x = i - y * width;
var equation = calc(x, y, i);
var clr = hsl2rgb(equation, 100, 50);
data[index] = clr.r;
data[index + 1] = clr.g;
data[index + 2] = clr.b;
data[index + 3] = 255;
}
ctx.putImageData(imageData, 0, 0);
}
function getColor(number) {
var n = number % 510;
return n > 255 ? (255 - (n - 255)) : n;
}
function hsl2rgb(h, s, l) {
h = h % 360;
var m1, m2, hue;
var r, g, b
s /= 100;
l /= 100;
if (s == 0)
r = g = b = (l * 255);
else {
if (l <= 0.5)
m2 = l * (s + 1);
else
m2 = l + s - l * s;
m1 = l * 2 - m2;
hue = h / 360;
r = HueToRgb(m1, m2, hue + 1 / 3);
g = HueToRgb(m1, m2, hue);
b = HueToRgb(m1, m2, hue - 1 / 3);
}
return {
r: r,
g: g,
b: b
};
}
function HueToRgb(m1, m2, hue) {
var v;
if (hue < 0)
hue += 1;
else if (hue > 1)
hue -= 1;
if (6 * hue < 1)
v = m1 + (m2 - m1) * hue * 6;
else if (2 * hue < 1)
v = m2;
else if (3 * hue < 2)
v = m1 + (m2 - m1) * (2 / 3 - hue) * 6;
else
v = m1;
return 255 * v;
}#canv {
border: 1px solid black;
}
#polecenie {
width: 400;
}
.przyklad {
background-color: #ddd;
margin-top: 5px;
border: 1px solid black;
width: 400;
}
.przyklad:hover {
background-color: #888;
}<body onload="inputChanged(document.getElementById('polecenie'));">
<canvas id="canv"></canvas><br><br>
<b>AVAILABLE VARIABLES: </b><br>
<b>x, y</b> - X, Y coordinates of current pixel.<br>
<b>i</b> - index of current pixel.<br>
<b>width, height</b> - canvas width & height;<br><br> Rotation of hsl color in point (x,y) = <input id="polecenie" type="text" value="Math.tan((y - height/2) / (x - width/2))*(180/Math.PI)" oninput="inputChanged(this);"></input>
<br><br><b id="errorLog" style="color: red;"></b><br> Cool examples:
<div class="przyklad" onclick="przyklad(this.innerText);">Math.atan2((y - height/2),(x - width/2))*(180/Math.PI)</div>
<div class="przyklad" onclick="przyklad(this.innerText);">Math.tan((y - height/2) / (x - width/2))*(180/Math.PI)</div>
<div class="przyklad" onclick="przyklad(this.innerText);">Math.asin((y - height/2) / (x - width/2))*(180/Math.PI)</div>
<div class="przyklad" onclick="przyklad(this.innerText);">x * y</div>
<div class="przyklad" onclick="przyklad(this.innerText);">(width*height)/x*y;</div>
<div class="przyklad" onclick="przyklad(this.innerText);">Math.random()*360</div>
<div class="przyklad" onclick="przyklad(this.innerText);">Math.sqrt((x - width/2)*(x - width/2) + (y - height/2)*(y-height/2)) > 150 ? 100: Math.sqrt((x - width/2)*(x - width/2) + (y - height/2)*(y-height/2));</div>
<div class="przyklad" onclick="przyklad(this.innerText);">((height*width) / (x+y)) + x%50</div>
<div class="przyklad" onclick="przyklad(this.innerText);">Math.random()*30+((x
< width/2.3 && y <=height/1.86) ? ((((y-6) % 35 < 18 && x % 45 < 20)&&(((y-6) % 35> 5 && x % 45 > 5))) ? i%3 == 0 ? 0 : (i%2 == 0 ? 240 : 120) : (i%3 == 200 ? 0 : (y%2 == 0 ? 240 : 280))) : (y % (height/6.5)
< (height/(13)) ? i%3==0 ? 0 : (i%2==0 ? 240 : 0) : i%3==0 ? 0 : (x%2==0 ? 120 : 240)))</div>
</body>所以...？
是否值得为此类应用程序使用某种库？
fps 增益值得花时间学习 API 吗？
也作为一个附带问题:
有人 可以向我推荐一些东西(一些书，或一个网站)，让我可以学习如何使我的代码简洁明了？
谢谢!
最佳答案
我个人从不喜欢任何形式的 JS 库和框架。这并不是说它们不好，但库涵盖了所有解决方案，它们往往会进行大量审查，有些只是充满了糟糕的代码。这意味着有很多不需要的额外代码(和一些不太好的代码)正在运行，从而影响性能。
对于初学者，库提供了一个快速的解决方案，但会导致对库的依赖。这意味着您没有学习可能使您处于劣势的底层 API。
使用图书馆的最佳方式是打开它并拆开它。删除您不会使用的内容，更改结构和功能以满足您的需求。通过这种方式，您可以根据需要优化库，了解它的结构，并通过库示例(如果它是一个好的库)学习如何有效地使用浏览器的 API
至于性能，如果您是一位经验丰富的编码人员并且很好地了解 javascript，那么请避免使用该库(但您可能已经知道了)，因为您将直接使用 API 获得更高的性能。
如果您是中型编码员，则使用该库作为模板。如果您是初学者，那么您应该考虑自己想要什么，学习如何使用浏览器的 API 或将其抽象出来，专注于构建您的应用程序，而不必过多担心性能。
关于javascript - WebGL 是否通过像素操作在像素方面更快地使用库？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43408818/