Javascript 如何使用html5画布绘制连续的圆形图案

我有这样的图像：

我想用图像作为图案来画。当我这样做时，我在画布上得到了如下结果：

但我需要输出为

所以我的问题是：

HTML

---

从一家在线销售大量衬衫的公司——沃尔玛那里吸取教训

他们所做的是展示一件漂亮的衬衫样品和一系列的色样

或者，对任何难以通过电脑增强的衬衫拍摄数码照片——比如你的格子图案

或者，使用3D建模程序，在该程序中可以对衬衫进行线框，然后弯曲线框，最后在线框上应用纹理贴图

---

Html画布并不是一个很好的工具来做你想做的事情。

在我的头顶上，你可以切换到极坐标系。用这种方法绘制“曲率”要容易得多。[This（）脚本]也可以帮助您进行转换。如果您可以提供一张图像，在每个点上提供方向信息，则可以概括这一点。例如，红色通道=x坐标，绿色通道=y坐标。然后创建一个重复的渐变，该渐变遵循您想要的形状，并通过将数据作为数组获取、手动修改并将其放回（或使用自定义着色器，但它们尚未得到正确支持）进行渲染。你甚至可以继续使用一个图像，使用蓝色作为亮度，使用alpha作为alpha。请参见我的回答：如果你建议创建衬衫的3D模型并在其上应用图案纹理，请选中此链接，你也可以在JavaScript中实现这一点，并将其绘制在HTML

上。我正在考虑更多地使用类似搅拌器电枢的东西来创建“弯曲肘部的手臂”的线框。然后将纹理应用于该线框，以便OP的棋盘格图案将随着弯曲的手臂弯曲。无论如何，我想不出任何简单的2d画布技巧可以单独使用画布来产生好的效果。我可能不得不使用webgl。

   <canvas id="mr_rotator_can" width="436" height="567"></canvas>
    <canvas id="f6258182013" width="436" height="567"></canvas>

  var source, source_ctx, sleeve, sleeve_ctx, finalsleeve, finalsleeve_ctx, temp_can1, temp_can1_ctx;
        $(document).ready(function () {



            temp_can1 = document.getElementById('f6258182013');
            temp_can1_ctx = temp_can1.getContext('2d');

            rotator3('http://i.stack.imgur.com/mLgiX.png', '30');
            draw_on_cloth("f6258182013", 'http://i.stack.imgur.com/1j8Dw.png', "mr_rotator_can", "img_fastening1a");

        });

        function rotator3(var2, var3) //var2=image aka pattern var3= angle for rotate
        {
            var mr_rotator_var = document.getElementById('mr_rotator_can');
            var mr_rotator_var_ctx = mr_rotator_var.getContext("2d");
            mr_rotator_var.width = mr_rotator_var.width;
            var imageObj_rotator3 = new Image();

            imageObj_rotator3.onload = function () {
                var pattern_rotator3 = mr_rotator_var_ctx.createPattern(imageObj_rotator3, "repeat");
                mr_rotator_var_ctx.fillStyle = pattern_rotator3;
                mr_rotator_var_ctx.rect(0, 0, mr_rotator_var.width, mr_rotator_var.height);
                mr_rotator_var_ctx.rotate(var3 * Math.PI / 180);
                mr_rotator_var_ctx.fill();

            };
            imageObj_rotator3.src = var2;


        }
        function draw_on_cloth(var1, var2, var3, var4) //var1=the output canvas var2=body part  var3= mr_rotator_can var4=image tag
        {
            debugger;
            var temp_fun_canvas = document.getElementById(var1);
            var temp_fun_canvas_ctx = temp_fun_canvas.getContext("2d");
            temp_fun_canvas.width = temp_fun_canvas.width;
            var fimg = new Image();


            fimg.onload = function () {

                temp_fun_canvas_ctx.drawImage(fimg, 0, 0);
                temp_fun_canvas_ctx.globalCompositeOperation = "source-atop";
                var pattern = temp_fun_canvas_ctx.createPattern(mr_rotator_can, 'repeat');
                temp_fun_canvas_ctx.rect(0, 0, mr_rotator_can.width, mr_rotator_can.height);
                temp_fun_canvas_ctx.fillStyle = pattern;
                temp_fun_canvas_ctx.fill();
                temp_fun_canvas_ctx.globalAlpha = .10;
                temp_fun_canvas_ctx.drawImage(fimg, 0, 0);
                temp_fun_canvas_ctx.drawImage(fimg, 0, 0);
                temp_fun_canvas_ctx.drawImage(fimg, 0, 0);

            };
            fimg.src = var2;
        }