Come disegnare una stella usando canvas HTML5?

Sto provando a disegnare una stella usando la tela, ma il codice non è in esecuzione. Voglio capire: quali sono i passaggi per misurare le coordinate Y e X? Come trovarli? disegnare qualsiasi forma?Come disegnare una stella usando canvas HTML5?

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

fonte

2014-09-14 user3624832

Tali funzioni, lineTo(), moveTo(), ictus(), ecc ... appartengono all'oggetto contesto, non l'oggetto tela. Stai controllando la tua console degli sviluppatori (f12 in Chrome)? Vedresti che queste funzioni non sono definite.

fonte

2014-09-14 20:51:38

Sì sto controllando la console da Chrome.Come definirli? Come scriverli per essere un oggetto canvas? – user3624832

Come accennato da @ v-rubinetti, si sta tentando di chiamare i metodi in modo errato.

Mentre può essere facile disegnare una semplice stella nella tela mediante la codifica, è complicato disegnare cose avanzate. È possibile utilizzare un software di grafica vettoriale open source come Inkscape insieme all'estensione ink2canvas per disegnare grafica vettoriale avanzata e salvarli in un documento html5.

Ad esempio, ecco una stella 25 punte disegnato in Inkscape e salvato utilizzando estensione ink2canvas:

<!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>

fonte

2014-09-15 00:24:40 kums

Perché dovresti convertire il tuo file SVG in codice quando puoi semplicemente disegnare da un file SVG: http://jsfiddle.net/Lq6rksct/1 I dati codificati nel tuo codice sono considerati una cattiva pratica. –

In quale altro modo posso rispondere alla domanda sui metodi di contesto? Non sto prendendo parte al dibattito Canvas vs SVG. Scegli quello che funziona meglio per te per quello che stai facendo (ad esempio, per i giochi, la tela funziona meglio). – kums

Si potrebbe voler rileggere il mio commento. Non ho nemmeno detto nulla sull'utilizzo di SVG su tela. –

Una stella è fondamentalmente un poligono regolare con punti alternati su un interno e un raggio esterno.

Ecco un esempio di una funzione flessibile per disegnare una forma a stella.

È possibile impostare la posizione, #spikes e l'interno & raggio esterno delle punte:

enter image description here

codice Esempio e una demo: 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>

fonte

2014-09-15 03:09:01 markE

Grazie, ho appena fatto circa 3 ore di lavoro in circa 5 minuti, grazie a te :) –

c'è un errore di battitura su 'ctx.strokeSyle', dovrebbe essere' ctx.strokeStyle' –

Ho creato qualcosa di incredibilmente bello che usa il tuo codice di base e lo espande. Potresti voler contattarmi su [email protected] se intendi condividere profitti direttamente conseguenti. –

//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(); 
}

fonte

2017-05-02 14:41:35

La funzione può essere più corto con le coordinate tradurre:

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

fonte

2017-07-17 09:09:02

Adoro questo metodo, può essere adattato a qualsiasi cosa con simmetria rotazionale. –

Come disegnare una stella usando canvas HTML5?

risposta

Problemi correlati