logo标签列表

在2D上下文中添加类似旗帜般的波动效果

javascripthtmlcanvas
3
我想要创建一个函数，以不同于通常方式的方式显示2d上下文。有点像变换的工作原理。我想要制造波浪状而不是弯曲/改变上下文的大小。这个想法是从上下文中产生的，而不是从数据图像中产生的。没有位操作。
类似的请求在这里完成：如何通过html5画布扭曲图像以创建飘动的旗帜效果，但需要进行位操作。
重点是通过减少位操作来提高性能。
编辑：我需要创建与链接中描述的相同函数（上面的那个），有一点不同。链接已经回答了你可以理解我的意思。在这个例子中，这是通过位操作执行的。我想做同样的事情，但是从上下文的角度来看。就像使用context.transform(..)函数一样。
Context.transform函数的示例：http://www.html5canvastutorials.com/advanced/html5-canvas-custom-transform/（您可以更改tranfsorm函数的参数以获得效果）
希望这能澄清问题。
2个回答
2
你可以使用context.drawImage绘制带有“波浪”y偏移的1像素宽的垂直切片。
这种方法的性能很好，因为你一次性绘制整个图像的高度，而不是逐像素地绘制。此外，绘制过程比像素操作快得多，因为所需像素从图像复制到画布。当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>
谢谢您的帮助。这正是我所需要的！ - Moon4u
1

你可以使用着色器进行优化，以便将工作负载转移到GPU上，但这只适用于3D/WebGL上下文。

至于2D，你只能在每个像素级别上进行处理，没有其他方法。

如果你通过这段话

The idea is that this has to come from the context

的意思是：要有一些受某种振荡力影响的对象，那么你应该寻找物理引擎：box2djs 是一个不错的选择。

p2.js 有一个漂亮的弹簧演示。

谢谢，我已经在C++上使用过box2d，这将很容易理解。顺便说一句，您是在说没有办法创建额外的函数来改变2dContext在画布上绘制的方式吗？ - Moon4u
不，我不是。我仍然不明白你想要实现什么。是对图像转换的某种优化，还是其他什么？ - nullpotent
哦，好的，我看到更新了。我想我知道你想要什么。您可以在上下文中使用矩阵来实现一些效果，但请记住，所有变换都是仿射的，因此您的选择有点受限。挥舞旗帜的效果需要更多自由度。 - nullpotent
但是你应该能够通过自定义的方式获得一些非亲和性。所以，是的，这是可能的。 - nullpotent
我检查了box2djs，他们在javascript中实现这个功能真的很酷。谢谢帮忙！ - Moon4u
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接