Wie zeichne ich einen Stern mit Leinwand HTML5?

Ich versuche, einen Stern mit Leinwand zu zeichnen, aber der Code läuft nicht. Ich möchte verstehen: Was sind die Schritte, um die Y- und X-Koordinate zu messen? Wie finde ich sie? irgendeine Form zeichnen?Wie zeichne ich einen Stern mit Leinwand 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>

Quelle

2014-09-14 user3624832

Diese Funktionen, lineTo(), moveTo(), Schlaganfall(), etc ... gehören zum Kontextobjekt, nicht die Leinwand-Objekt. Überprüfst du deine Entwicklerkonsole (f12 in Chrome)? Sie würden sehen, dass diese Funktionen nicht definiert sind.

Quelle

2014-09-14 20:51:38

Ja, ich überprüfe die Konsole von Chrome.Wie um sie zu definieren? Wie Sie sie als Canvas-Objekt schreiben? – user3624832

Wie von @ v-rubinetti erwähnt, versuchen Sie Methoden falsch aufzurufen.

Während es einfach sein kann, einen einfachen Stern in der Leinwand durch Codierung zu zeichnen, ist es kompliziert, fortgeschrittene Dinge zu zeichnen. Sie können eine Open-Source-Vektor-Grafiksoftware wie Inkscape zusammen mit der Erweiterung ink2canvas verwenden, um erweiterte Vektorgrafiken zu zeichnen und sie in einem html5-Dokument zu speichern.

Zum Beispiel, hier ist ein 25 zackigen Stern in Inkscape erstellt und gespeichert ink2canvas Erweiterung mit:

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

Quelle

2014-09-15 00:24:40 kums

Warum würden Sie Ihre SVG-Datei in Codes konvertieren, wenn Sie einfach aus einer SVG-Datei zeichnen können: http://jsfiddle.net/Lq6rksct/1 Hard-Coding-Daten in Ihrem Code wird als eine schlechte Praxis betrachtet. –

Wie kann ich sonst die Frage zu den Kontextmethoden beantworten? Ich nehme keine Partei in der Canvas vs SVG Debatte. Wählen Sie den aus, der am besten für Sie geeignet ist (zum Beispiel für Spiele funktioniert Leinwand am besten). – kums

Vielleicht möchten Sie meinen Kommentar noch einmal lesen. Ich habe nicht einmal etwas über die Verwendung von SVG über Leinwand gesagt. –

Ein Stern ist im Grunde ein regelmäßiges Vieleck mit abwechselnden Punkten auf einem inneren und einem äußeren Radius.

Hier ist ein Beispiel für eine flexible Funktion zum Zeichnen einer Sternform.

kann die Position gesetzt, und der innere #spikes & Außenradius der Spitzen:

enter image description here

Beispiel Code und eine 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>

Quelle

2014-09-15 03:09:01 markE

Danke, ich habe gerade etwa 3 Stunden Arbeit in etwa 5 Minuten, dank dir :) –

gibt es einen Tippfehler auf 'ctx.strokeSyle', sollte es' ctx.strokeStyle' sein –

Ich habe etwas atemberaubend schön, die Ihre verwendet Basiscode und erweitert es. Sie können mich unter [email protected] kontaktieren, wenn Sie beabsichtigen, an direkt entstehenden Gewinnen teilzunehmen. –

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

Quelle

2017-05-02 14:41:35

Die Funktion kann mit der Koordinate kürzer sein:

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

Quelle

2017-07-17 09:09:02

Liebe diese Methode, kann mit Rotationssymmetrie an alles angepasst werden. –

Wie zeichne ich einen Stern mit Leinwand HTML5?

Antwort

Verwandte Themen