我想制作一个以不同于平常的方式显示 2d 上下文的函数。有点像转换工作。我不想弯曲/改变上下文的大小，而是让它像波浪一样。这个想法是，这必须来自上下文，而不是来自数据图像。没有位操作。
此处完成了类似的请求:How to distort an image to create flag waving in the wind effect using html5 canvas但有位操作。
重点是通过减少位操作来提高性能。
编辑:我需要制作链接中描述的相同功能(上面的那个)，但有一点不同。该链接已得到解答，因此您可以理解我的意思。在示例中，这是通过位操作执行的。我想做同样的事情，但从上下文的 Angular 来看。就像它用 context.transform(..) 函数完成的那样。
Context.transform 函数示例:http://www.html5canvastutorials.com/advanced/html5-canvas-custom-transform/ (你可以改变tranfsorm函数的参数来获得效果)
希望一切都过去了。
最佳答案
您可以使用 context.drawImage 绘制具有“波浪”y 偏移的 1 像素宽的垂直切片。
此方法可提供良好的性能，因为您是一次绘制图像的整个高度，而不是逐个像素地绘制。此外，绘图过程比像素操作快得多，因为所需的像素从图像传输到 Canvas 。当 GPU 可用时，此方法使用 GPU 加速。
示例代码和演示:http://jsfiddle.net/m1erickson/bcjmxr80/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=start;
img.src=document.getElementById("source").src;
function start(){
var iw=img.width;
var ih=img.height;
canvas.width=iw+100;
canvas.height=ih+100;
for(var x=0;x<310;x++){
var y=5*Math.sin(x/10)+200-162;
ctx.drawImage(img, x,0,1,ih, x,y,1,ih);
}
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Original Image</h4>
<img id=source src="https://dl.dropboxusercontent.com/u/139992952/multple/usaFlag.png"><br>
<h4>Wavy using vertical slices in canvas</h4>
<canvas id="canvas"></canvas>
</body>
</html>
关于javascript - 添加 flaglike 挥舞到 2d 上下文，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25668914/