如何使用html5canvas绘制连续的圆形图案

我有这个图像：

我想用图像绘制 作为模式。 当我在canvas上得到一个像这样的结果：

但我需要输出

所以我的问题是：

HTML

JS

  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; } 

这是我到目前为止在JSFiddler上所做的

Answer 1

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

他们所做的是展示一件漂亮的样品衬衫以及一系列颜色样本。

或者，拍摄任何难以计算机增强的衬衫的数码照片 – 比如你的方格图案。

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

Htmlcanvas不是一个做你想做的好工具。