添加flaglike挥动到2d Context

时间：2014-09-04 15:05:12

标签： javascript html5 canvas

我想创建一个以与平常不同的方式显示二维上下文的函数。有点像变换工作。而不是弯曲/改变上下文的大小我想让它像波浪一样。这个想法是，这必须来自上下文，而不是来自数据图像。没有位操纵。

类似的请求在这里完成：How to distort an image to create flag waving in the wind effect using html5 canvas但是有位操作。

重点是通过减少位操作来提高性能。

编辑：我需要创建链接（上面的链接）中描述的相同功能，但有一点不同。链接已回答，因此您可以理解我的意思。在该示例中，这通过位操作来执行。我想做同样的事情，但是从上下文的角度来看。就像使用context.transform（..）函数完成的那样。

Context.transform函数的示例：http://www.html5canvastutorials.com/advanced/html5-canvas-custom-transform/（您可以更改tranfsorm函数的参数以获得效果）

希望能够解决它。

2 个答案:

答案 0 :(得分：1)

您可以使用着色器进行优化，以便将工作负载转移到GPU，但这是3d/webgl上下文。

对于2d，您只需要按像素级别进行操作，没有别的办法。

如果通过这个

  

这个想法是，这必须来自上下文

你的意思是：要拥有被一些振荡力转换的物体，那么你应该寻找物理引擎：box2djs浮现在脑海中。

p2.js有一个很好的弹簧演示。

答案 1 :(得分：1)

您可以使用context.drawImage绘制1像素宽的垂直切片，使用＆＃34;波浪＆＃34; y偏移量。

这种方法可以提供良好的性能，因为您可以一次性绘制图像的整个高度而不是像素一样。此外，绘制过程比像素操作快得多，因为所需的像素从图像到画布是blitted。当GPU可用时，此方法使用GPU加速。

enter image description here

示例代码和演示：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>
相关问题
最新问题