कैनवास एचटीएमएल 5 का उपयोग कर स्टार कैसे आकर्षित करें?

कैनवास का उपयोग कर स्टार खींचने की कोशिश कर रहा हूं, लेकिन कोड नहीं चल रहा है। मैं समझना चाहता हूं: वाई और एक्स समन्वय को मापने के लिए क्या कदम हैं? उन्हें कैसे ढूंढें? किसी भी आकार को आकर्षित करने के लिए?कैनवास एचटीएमएल 5 का उपयोग कर स्टार कैसे आकर्षित करें?

<html> 
<head> 
    <meta charset = "utf-8"> 
    <title>Drawing Lines</title> 
</head> 
<body> 
    <canvas id = "drawLines" width = "400" height = "200" 
    style = "border: 1px solid Black;"> 
    </canvas> 
    <script> 
    var canvas = document.getElementById("drawLines"); 
    var context = canvas.getContext("2d") 

    canvas.beginPath(); 
    canvas.moveTo(50,50); 
    canvas.lineTo(120,150); 
    canvas.lineTo(0,180); 
    canvas.lineTo(120,210); 
    canvas.lineTo(50,310); 
    canvas.lineTo(160,250); 
    canvas.lineTo(190,370); 
    canvas.lineTo(220,250); 
    canvas.lineTo(330,310); 
    canvas.lineTo(260,210); 
    canvas.lineTo(380,180); 
    canvas.closePath(); 
    canvas.stroke(); 
    </script> 
</body> 
</html>

स्रोत

2014-09-14 user3624832

उन कार्यों, lineTo(), moveTo(), स्ट्रोक(), आदि ... संदर्भ वस्तु, नहीं कैनवास वस्तु के हैं। क्या आप अपने डेवलपर कंसोल (क्रोम में एफ 12) की जांच कर रहे हैं? आप देखेंगे कि ये फ़ंक्शन अपरिभाषित हैं।

स्रोत

2014-09-14 20:51:38

हाँ क्रोम द्वारा कंसोल की जांच कर रहा हूं। उन्हें कैसे परिभाषित किया जाए? उन्हें कैनवास ऑब्जेक्ट के रूप में कैसे लिखें? – user3624832

जैसा कि @ v-rubinetti द्वारा उल्लिखित है, आप गलत तरीके से कॉल करने का प्रयास कर रहे हैं।

हालांकि कोडिंग द्वारा कैनवास में एक साधारण सितारा खींचना आसान हो सकता है, यह उन्नत चीजों को चित्रित करने के लिए जटिल है। उन्नत वेक्टर ग्राफिक्स को आकर्षित करने और उन्हें HTML5 दस्तावेज़ में सहेजने के लिए ink2canvas एक्सटेंशन के साथ Inkscape जैसे ओपन-सोर्स वेक्टर ग्राफिक्स सॉफ़्टवेयर का उपयोग कर सकते हैं।

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Inkscape Output</title> 
</head> 
<body> 
    <canvas id='canvas' width='320' height='320'></canvas> 
    <script> 
    var ctx = document.getElementById("canvas").getContext("2d"); 
    ctx.save(); 
    ctx.lineJoin = 'miter'; 
    ctx.strokeStyle = 'rgb(0, 0, 0)'; 
    ctx.lineCap = 'butt'; 
    ctx.lineWidth = 1.000000; 
    ctx.fillStyle = 'rgb(255, 255, 0)'; 
    ctx.beginPath(); 
    ctx.transform(0.506236, 0.000000, 0.000000, 0.505711, 82.274469, 51.410524); 
    ctx.moveTo(342.857130, 449.505040); 
    ctx.lineTo(234.764940, 344.516400); 
    ctx.lineTo(279.468630, 488.419550); 
    ctx.lineTo(200.881970, 359.847880); 
    ctx.lineTo(208.393950, 510.347410); 
    ctx.lineTo(164.250710, 366.271350); 
    ctx.lineTo(134.098980, 513.910810); 
    ctx.lineTo(127.172840, 363.383190); 
    ctx.lineTo(61.251941, 498.885850); 
    ctx.lineTo(91.978093, 351.364870); 
    ctx.lineTo(-5.569921, 466.216610); 
    ctx.lineTo(60.877887, 330.971560); 
    ctx.lineTo(-62.167941, 417.955810); 
    ctx.lineTo(35.826363, 303.484630); 
    ctx.lineTo(-104.985860, 357.135850); 
    ctx.lineTo(18.397601, 270.631190); 
    ctx.lineTo(-131.333260, 287.578290); 
    ctx.lineTo(9.686712, 234.475540); 
    ctx.lineTo(-139.554650, 213.653670); 
    ctx.lineTo(10.241036, 197.289490); 
    ctx.lineTo(-129.133450, 140.006950); 
    ctx.lineTo(20.025741, 161.409550); 
    ctx.lineTo(-100.724450, 71.265628); 
    ctx.lineTo(38.426018, 129.090210); 
    ctx.lineTo(-56.112700, 11.748970); 
    ctx.lineTo(64.285711, 102.362200); 
    ctx.lineTo(1.898679, -34.803371); 
    ctx.lineTo(95.979959, 82.904945); 
    ctx.lineTo(69.664621, -65.466342); 
    ctx.lineTo(131.517300, 71.941014); 
    ctx.lineTo(142.927140, -78.313274); 
    ctx.lineTo(168.664780, 70.159311); 
    ctx.lineTo(217.082890, -72.536949); 
    ctx.lineTo(205.088300, 77.671789); 
    ctx.lineTo(287.472380, -48.500313); 
    ctx.lineTo(238.499240, 94.006409); 
    ctx.lineTo(349.672790, -7.713676); 
    ctx.lineTo(266.798250, 118.136810); 
    ctx.lineTo(399.775840, 47.260185); 
    ctx.lineTo(288.207210, 148.546780); 
    ctx.lineTo(434.633360, 112.967060); 
    ctx.lineTo(301.380910, 183.325570); 
    ctx.lineTo(452.055130, 185.278350); 
    ctx.lineTo(305.491610, 220.287880); 
    ctx.lineTo(450.946490, 259.650470); 
    ctx.lineTo(300.281000, 257.111240); 
    ctx.lineTo(431.377070, 331.410340); 
    ctx.lineTo(286.076510, 291.481900); 
    ctx.lineTo(394.576520, 396.049020); 
    ctx.lineTo(263.770630, 321.240230); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 
    ctx.restore(); 
    </script> 
</body> 
</html>

स्रोत

2014-09-15 00:24:40 kums

जब आप आसानी से एसवीजी फ़ाइल से आकर्षित कर सकते हैं तो आप अपनी एसवीजी फ़ाइल को कोड में क्यों परिवर्तित करेंगे: http://jsfiddle.net/Lq6rksct/1 आपके कोड में हार्ड कोडिंग डेटा को खराब अभ्यास माना जाता है। –

मैं संदर्भ विधियों के बारे में प्रश्न का उत्तर कैसे दे सकता हूं? मैं कैनवास बनाम एसवीजी बहस में पक्ष नहीं ले रहा हूं। जो भी आप कर रहे हैं उसके लिए सबसे अच्छा काम करने वाला एक चुनें (उदाहरण के लिए, गेम के लिए, कैनवास सबसे अच्छा काम करता है)। – kums

आप मेरी टिप्पणी फिर से पढ़ना चाहेंगे। मैंने कैनवास पर एसवीजी का उपयोग करने के बारे में कुछ भी नहीं कहा। –

एक सितारा मूल रूप से एक आंतरिक और एक बाहरी त्रिज्या पर बारी अंक के साथ एक नियमित बहुभुज है:

उदाहरण के लिए, यहाँ एक 25 उठाई स्टार इंकस्केप में तैयार और बचाया ink2canvas एक्सटेंशन का उपयोग कर रहा है।

यहां स्टार आकार बनाने के लिए एक लचीली फ़ंक्शन का एक उदाहरण दिया गया है।

enter image description here

उदाहरण कोड और एक डेमो:: http://jsfiddle.net/m1erickson/8j6kdf4o/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    function drawStar(cx,cy,spikes,outerRadius,innerRadius){ 
     var rot=Math.PI/2*3; 
     var x=cx; 
     var y=cy; 
     var step=Math.PI/spikes; 

     ctx.beginPath(); 
     ctx.moveTo(cx,cy-outerRadius) 
     for(i=0;i<spikes;i++){ 
     x=cx+Math.cos(rot)*outerRadius; 
     y=cy+Math.sin(rot)*outerRadius; 
     ctx.lineTo(x,y) 
     rot+=step 

     x=cx+Math.cos(rot)*innerRadius; 
     y=cy+Math.sin(rot)*innerRadius; 
     ctx.lineTo(x,y) 
     rot+=step 
     } 
     ctx.lineTo(cx,cy-outerRadius); 
     ctx.closePath(); 
     ctx.lineWidth=5; 
     ctx.strokeStyle='blue'; 
     ctx.stroke(); 
     ctx.fillStyle='skyblue'; 
     ctx.fill(); 
    } 

    drawStar(100,100,5,30,15); 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

स्रोत

2014-09-15 03:09:01 markE

धन्यवाद, मैंने लगभग 5 मिनट में लगभग 3 घंटे काम किया है, धन्यवाद :) –

'ctx.strokeSyle' पर एक टाइपो है, यह' ctx.strokeStyle' –

होना चाहिए मैंने आपके लिए कुछ आश्चर्यजनक रूप से सुंदर बनाया है मूल कोड और इसे फैलाता है। यदि आप किसी भी प्रत्यक्ष परिणामस्वरूप मुनाफे में हिस्सा लेना चाहते हैं तो आप रेलस्किडी @ yahoo.com पर मुझसे संपर्क करना चाह सकते हैं। –

//function to draw star with N spikes 
//centered on a circle of radius R, centered on (cX,cY) 
function star(R, cX, cY, N) { 
    //star draw 
    ctx.beginPath(); 
    ctx.moveTo(cX + R,cY); 
    for(var i = 1; i <= N * 2; i++) 
    { 
    if(i % 2 == 0){ 
     var theta = i * (Math.PI * 2)/(N * 2); 
     var x = cX + (R * Math.cos(theta)); 
     var y = cY + (R * Math.sin(theta)); 
    } else { 
     var theta = i * (Math.PI * 2)/(N * 2); 
     var x = cX + ((R/2) * Math.cos(theta)); 
     var y = cY + ((R/2) * Math.sin(theta)); 
    } 

    ctx.lineTo(x ,y); 
    } 
    ctx.closePath(); 
    ctx.stroke(); 
}

स्रोत

2017-05-02 14:41:35

समारोह

आप स्थिति, #spikes और spikes के भीतरी & बाहरी त्रिज्या सेट कर सकते हैं समन्वय अनुवाद के साथ छोटा हो सकता है:

function strokeStar(x, y, r, n, inset) { 
    ctx.save(); 
    ctx.beginPath(); 
    ctx.translate(x, y); 
    ctx.moveTo(0,0-r); 
    for (var i = 0; i < n; i++) { 
     ctx.rotate(Math.PI/n); 
     ctx.lineTo(0, 0 - (r*inset)); 
     ctx.rotate(Math.PI/n); 
     ctx.lineTo(0, 0 - r); 
    } 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.restore(); 
}

स्रोत

2017-07-17 09:09:02

इस विधि को प्यार करें, घूर्णन समरूपता वाले किसी भी चीज़ के लिए अनुकूलित किया जा सकता है। –

कैनवास एचटीएमएल 5 का उपयोग कर स्टार कैसे आकर्षित करें?

उत्तर

संबंधित मुद्दे