所以我正在为 webapp 创建扭曲。我想在 mac 中实现一些类似于照相亭应用程序的效果。很难在网上找到资料。大多数文章(如 http://www.splashnology.com/article/pixel-distortions-with-bilinear-filtration-in-html5-canvas/4739/)仅描述基础知识。现在，例如，我想让球形或旋转效果在 Angular 落处更加平滑，但我找不到任何解决方案。 任何帮助，想法，资源？ 非常感谢!
最佳答案
好吧，如果您对像波浪这样的简单效果感兴趣，请阅读此处 http://ru.wikipedia.org/wiki/Синусоида，这是我们八年级时的所有想法(从俄语到英语的谷歌翻译)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/common.js"></script>
<link rel="stylesheet" href="style.css">
<script>
addEventListener('load', function() {
var cnv = gid('q');
var ctx = cnv.getContext('2d');
// характеризует сдвиг графика по оси Oy. Чем больше a, тем выше поднимается график
var a = cnv.height / 2;
// характеризует растяжение графика по оси Oy. Чем больше увеличивается b, тем сильнее возрастает амплитуда колебаний
var b = 10;
// характеризует растяжение графика по оси Ox. При увеличении c частота колебаний повышается
var c = .05;
// характеризует сдвиг графика по оси Ox. При увеличении d график двигается в положительном направлении оси абсцисс
var d = 0;
for (var i = 0; i < cnv.width; ++i) {
ctx.fillRect(i, ( a + b * Math.sin(c * i + d) ), 1, 1);
}
var cnv1 = gid('e');
var ctx1 = cnv1.getContext('2d');
ctx1.font = 'bold 30px Calibri';
ctx1.fillText('Hello', 10, 30);
var imd = ctx1.getImageData(0, 0, cnv1.width, cnv1.height);
var cnv2 = gid('r');
var ctx2 = cnv2.getContext('2d');
ctx2.fillRect(0, 0, cnv2.width, cnv2.height);
var imd1 = ctx2.getImageData(0, 0, cnv2.width, cnv2.height);
var w = imd.width * 4;
for (var i = 0, j, x, y, d = imd.data, d1 = imd1.data, l = d.length; i < l; i += 4) {
y = Math.floor(i / w);
x = i - w * y;
j = ( y + Math.floor( 10 * Math.sin(.01 * x) ) ) * w + x;
d1[j] = d[i];
d1[j + 1] = d[i + 1];
d1[j + 2] = d[i + 2];
d1[j + 3] = d[i + 3];
}
ctx2.putImageData(imd1, 0, 0);
});
</script>
</head>
<body>
<canvas id="q" width="140" height="40"></canvas>
<p>График синусоиды.</p>
<canvas id="e" width="140" height="40"></canvas>
<p>Изображение без искажения.</p>
<canvas id="r" width="140" height="40"></canvas>
<p>Изображение с искажением.</p>
</body>
</html>
关于javascript - JavaScript 中的图像失真算法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15370613/