एचटीएमएल कैनवास

Question

पर निरंतर अलग-अलग लाइन चौड़ाई के साथ रेखाचित्र रेखाएं मैं एक रेखा खींचने की कोशिश कर रहा हूं जो पतली रेखा के रूप में शुरू होती है और फिर अंत तक अंततः चौड़ी हो जाती है। मुझे सेमी-चिकनी वक्र (कई सीधी रेखाओं से समग्र) को आकर्षित करने की आवश्यकता है और मुझे इस कार्य को हल करने के लिए एक रास्ता खोजने में समस्याएं आ रही हैं।

http://jsfiddle.net/ZvuQG/1/

जब आप स्ट्रोक() कहते हैं, वर्तमान में सेट linewidth पूरी पंक्ति स्ट्रोक के लिए इस्तेमाल किया जाता है:

इस बेला मेरी समस्या को दर्शाता है। मेरा पहला विचार अलग-अलग प्रत्येक पंक्ति टुकड़ा को आकर्षित करना था, लेकिन निश्चित रूप से, यह कोनों पर रेखा में ध्यान देने योग्य अंतराल छोड़ देता है।

मेरा सबसे अच्छा विकल्प यहां क्या है? क्या मुझे कोनों को सही करने के लिए बहुभुज (trapezoids) ड्राइंग करना चाहिए?

क्या कोई आसान तरीका है?

(संपादित करें: ध्यान दें कि मैं वास्तव में दीर्घवृत्त या किसी अन्य बुनियादी आकार आकर्षित करने के लिए कोशिश नहीं कर रहा हूँ, मैं गणितीय कार्य साजिश कोशिश कर रहा हूँ, रेखा की मोटाई का उपयोग कर वेग का प्रतिनिधित्व करने के लिए) गोल लाइन कैप और एक द्विघात जोड़ना

Answer 1

रुचि रखने वालों के लिए, मैं अपनी समस्या के दो समाधान के साथ आया हूं।

पहला विचार वास्तव में एक कोने के रूप में प्रत्येक बिंदु को आकर्षित करना था, एक साफ कोण खींचने के लिए कैनवास का उपयोग करना। ,,

http://jsfiddle.net/7BkyK/2/

var ctx = document.getElementById('canvas1').getContext('2d'); 
var points = [null, null, null]; 

for(var i=0; i<24; i++) 
{ 
    var width = 0.5 + i/2; 

    var m = 200; 

    var x = Math.cos(i/4) * 180; 
    var y = Math.sin(i/4) * 140; 

    points[0] = points[1]; 
    points[1] = points[2]; 
    points[2] = { X:x, Y:y}; 

    if(points[0] == null) 
     continue; 

    var px0 = (points[0].X + points[1].X)/2; 
    var py0 = (points[0].Y + points[1].Y)/2; 

    var px1 = (points[1].X + points[2].X)/2; 
    var py1 = (points[1].Y + points[2].Y)/2; 

    ctx.beginPath(); 
    ctx.lineWidth = width; 
    ctx.strokeStyle = "rgba(0,0,0,0.5)"; 
    ctx.moveTo(m+px0,m+py0); 
    ctx.lineTo(m+points[1].X,m+points[1].Y); 
    ctx.lineTo(m+px1,m+py1); 
    ctx.stroke(); 
} 
​ 

दूसरे और ज्यादा खूबसूरत समाधान के रूप में Shmiddty ने सुझाव दिया घटता बेज़ियर उपयोग करने के लिए है: एक डेमो में देखा जा सकता। ,

http://jsfiddle.net/Ssrv9/1/

// 1. 
// Varying line width, stroking each piece of line separately 
var ctx = document.getElementById('canvas1').getContext('2d'); 
var points = [null, null, null, null]; 

for(var i=-1; i<25; i = i +1) 
{ 
    var width = 0.5 + i/2; 

    var m = 200; 


    var x = Math.cos(i/4) * 180; 
    var y = Math.sin(i/4) * 140; 

    points[0] = points[1]; 
    points[1] = points[2]; 
    points[2] = { X:x, Y:y}; 

    if(points[0] == null) 
     continue; 


    var p0 = points[0]; 
    var p1 = points[1]; 
    var p2 = points[2]; 

    var x0 = (p0.X + p1.X)/2; 
    var y0 = (p0.Y + p1.Y)/2; 

    var x1 = (p1.X + p2.X)/2; 
    var y1 = (p1.Y + p2.Y)/2; 

    ctx.beginPath(); 
    ctx.lineWidth = width; 
    ctx.strokeStyle = "black"; 

    ctx.moveTo(m+x0, m+y0); 
    ctx.quadraticCurveTo(m+p1.X, m+p1.Y, m+x1, m+y1); 
    ctx.stroke(); 
} 

Answer 2

वक्र पूरी चीज को बहुत साफ दिखता है।

उदाहरण के लिए here देखें।

Answer 3

एक और तरीका जिसे आप हल कर सकते हैं, यह है कि आप प्रत्येक प्लॉट प्वाइंट को गति से निर्धारित त्रिज्या का चक्र बनें।

प्लॉट पथ इन सर्किलों (सीधे या घुमावदार, आपकी पसंद) के प्रोफाइल-किनारों में शामिल हो रहे हैं, पहले शीर्ष पर, आखिरी बार और नीचे की तरफ शुरू होने के लिए। फिर अंत में पथ भरें।

इससे आपको एक साइड लाइन विस्तार और अनुबंध करना चाहिए क्योंकि यह आपके साजिश बिंदु 'मंडल' तक पहुंचता है।