如何在html5画布中弯曲/弯曲图像 [英] 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画布中完成。如果可能的话,请告诉我一些指示/示例。
is this possible to do in html5 canvas. if possible then show me some direction/example.
谢谢
推荐答案
使用任何原生Canvas转换是不可能的,因为拉伸输出需要非仿射转换。也就是说,它不能简单地通过组合旋转,平移等来实现。
It's not possible using any native Canvas transformations as your stretched output requires non-affine transformations. i.e. it cannot be achieved simply by combining rotations, translations, etc.
理想情况下,你需要定义一个公式映射到扭曲坐标系的原始笛卡尔坐标,然后迭代在目标像素空间上,使用上面的映射来确定该像素所需的颜色。
Ideally you need to define a formula mapping to the original cartesian coordinates from the distorted coordinate system and then iterate over the destination pixel space, using the above mapping to determine the required colour for that pixel.
您还需要插入相邻像素以避免输出看起来块状 。
You would also need to interpolate neighbouring pixels to avoid the output looking "blocky".
这不重要......
This is non-trivial...
这篇关于如何在html5画布中弯曲/弯曲图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!