问题描述
我有这张图片:
我想用图像 作为图案进行绘制.当我这样做时，我在画布上得到了这样的结果:
and i want to draw with the image as the pattern. When i did i got a result on the canvas like this:
但我需要输出是
所以我的问题是:
HTML
<canvas id="mr_rotator_can" width="436" height="567"></canvas>
<canvas id="f6258182013" width="436" height="567"></canvas>
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 上所做的工作
推荐答案
学习一家在线销售大量衬衫的公司——沃尔玛.
Take a lesson from a company that sells a large quantity of shirts online--Walmart.
他们所做的是展示一件漂亮的衬衫样品以及一系列色样.
What they do is show a nice sample shirt along with a series of color swatches.
或者，为任何难以通过计算机增强的衬衫拍摄数码照片，例如您的方格图案.
Alternatively, take digital photos of any shirts that are difficult to computer enhance--like your checkered pattern.
或者，使用 3D 建模程序，您可以在其中为您的衬衫线框，然后弯曲该线框，最后在线框上应用纹理贴图.
Alternatively, use a 3D modeling program where you can wireframe your shirt, then bend that wireframe and finally apply texture maps over the wireframe.
Html 画布并不是一个很好的工具来做你想做的事.
这篇关于如何用html5画布绘制一个连续的圆形图案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！