向2d上下文添加旗帜挥舞 [英] Add flaglike waving to 2d Context
问题描述
我想创建一个以不同于通常方式显示2d上下文的函数。像变换的排序工作。而不是弯曲/改变上下文的大小，我想让它波浪。这个想法是，这必须来自上下文，而不是来自数据图像。没有位操作。
这里也有类似的要求：
<！doctype html&
< html>
< head>
< link rel =stylesheettype =text / cssmedia =allhref =css / reset.css/> <！ - reset css - >
< script type =text / javascriptsrc =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>原始图片< / h4>
< img id = source src =https://dl.dropboxusercontent.com/u/139992952/multple/usaFlag.png>< br>
< h4>波浪在画布中使用垂直切片< / h4>
< canvas id =canvas>< / canvas>
< / body>
< / html>
I want to make a function that displays a 2d context in a different way than usual. Sort of like the transform works. Instead of curving/changing the size of the context I want to make it wave-like. The idea is that this has to come from the context, not from the data image. No bit manipulation.
A similar request is done here: How to distort an image to create flag waving in the wind effect using html5 canvas but with bit manipulation.
The point is to increase performance by reducing bit manipulation.
Edit: I need to make the same function that is described in the link (the one in above), with a little difference. The link is answered so you can understand what I mean. In the example, this is executed by bit manipulation. I want to make the same thing, but from the context's side. Like its done with the context.transform(..) function.
example of the Context.transform function: http://www.html5canvastutorials.com/advanced/html5-canvas-custom-transform/ (you can change the tranfsorm function's parameters to get the effect)
Hope that clears it up.
You can use context.drawImage to draw 1 pixel wide vertical slices with a "wavy" y-offset.
This method gives good performance because you're drawing the entire height of the image at once instead of pixel-by-pixel. Also, the drawing process is much faster than pixel manipulation because the required pixels are blitted from the image to the canvas. And this method uses GPU acceleration when a GPU is available.
Example code and a Demo: 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>
这篇关于向2d上下文添加旗帜挥舞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
