6
के साथ निरंतर परिपत्र पैटर्न पेंट करने के लिए कैसे मैं इस छवि है:html5 कैनवास
और मैं पैटर्न के रूप में छवि 
साथ आकर्षित करने के लिए चाहते हैं। जब मैंने किया मैं इस तरह कैनवास पर एक परिणाम मिला:
लेकिन मैं उत्पादन की जरूरत है
होने के लिए तो मेरे सवाल है:
एचटीएमएल
वॉल-मार्ट -<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;
}
Here is what i have done so far on JSFiddler
मेरे सिर के ऊपर से, आप एक ध्रुवीय समन्वय प्रणाली पर स्विच कर सकते हैं। "वक्रता" के साथ आकर्षित करने के लिए इतना आसान तरीका है। [यह (https://github.com/lsauer/vector-js) स्क्रिप्ट] रूपांतरण में आपकी सहायता भी कर सकता है। –
यदि आप ऐसी छवि प्रदान कर सकते हैं जो प्रत्येक बिंदु पर दिशा जानकारी देता है तो आप इसे सामान्यीकृत कर सकते हैं। जैसे लाल चैनल = एक्स समन्वय, हरे रंग के चैनल = वाई समन्वय। फिर एक दोहराव ढाल है जो आपके इच्छित आकार का पालन करता है, और डेटा को सरणी के रूप में प्राप्त करके प्रस्तुत करता है, इसे मैन्युअल रूप से संशोधित करता है और इसे वापस रखता है (या कस्टम शेडर का उपयोग करता है लेकिन वे अभी तक ठीक से समर्थित नहीं हैं)। आप अल्फा के रूप में नीले रंग के चमक और अल्फा के रूप में नीले रंग का उपयोग करके एक छवि का उपयोग भी कर सकते हैं। – Dave
मेरा उत्तर यहाँ देखें: http://stackoverflow.com/questions/18428355/how-to-bend-curve-a-image-in-html5-canvas/18431486#18431486 – markE