[英]How to bend/curve a image in html5 canvas
我有这个
我想做这个
至
HTML
<canvas id="mycanvas"></canvas>
JS
var temp_can1, temp_can1_ctx;
$(document).ready(function () {
temp_can1 = document.getElementById('mycanvas');
temp_can1_ctx = temp_can1.getContext('2d');
var imageObj_rotator3 = new Image();
imageObj_rotator3.onload = function () {
temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0);
temp_can1_ctx.globalCompositeOperation = "source-atop";
var pattern = temp_can1_ctx.createPattern(imageObj_rotator3, 'no-repeat');
temp_can1_ctx.rect(0, 0, temp_can1.width, temp_can1.height);
temp_can1_ctx.fillStyle = pattern;
temp_can1_ctx.fill();
temp_can1_ctx.globalAlpha = 0.10;
temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0);
temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0);
temp_can1_ctx.drawImage(imageObj_rotator3, 0, 0);
};
imageObj_rotator3.src = 'http://i.stack.imgur.com/o8EJp.png';
});
这是可以在html5画布中做到的。 如果可能的话,请告诉我一些方向/例子。
谢谢
由于拉伸输出需要非仿射变换,因此无法使用任何本机Canvas变换。 即仅仅通过组合旋转,翻译等无法实现。
理想情况下,您需要定义一个公式映射到扭曲坐标系中的原始笛卡尔坐标,然后迭代目标像素空间,使用上面的映射来确定该像素所需的颜色。
您还需要插入相邻像素以避免输出看起来“块状”。
这是非平凡的......
是的,这是可能的,但对您的项目来说似乎并不实用。
您可以使用透视切片技术:
http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas102.html
你也可以“伪造”非仿射变换。 这通常涉及:
为此,您需要WebGL。 您必须拍摄想要扭曲的图像,将其用作纹理并将其映射到曲面上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.