Tuval HTML5'i kullanarak bir yıldız nasıl çizilir?

Tuvali kullanarak bir yıldız çizmeye çalışıyorum ama kod çalışmıyor. Anlamak istiyorum: Y ve X koordinatını ölçmek için adımlar nelerdir? Onları nasıl bulabilirim? herhangi bir şekil çizmek için?Tuval HTML5'i kullanarak bir yıldız nasıl çizilir?

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

kaynak

2014-09-14 user3624832

Bu işlevler, lineTo(), moveTo(), inme(), vb ... bağlam nesnesi değil, tuval nesnesi aittir. Geliştirici konsolunuzu kontrol ediyor musunuz (Chrome'da f12)? Bu işlevlerin tanımsız olduğunu görürsünüz.

kaynak

2014-09-14 20:51:38

Konsolu Chrome tarafından kontrol ediyorum. Nasıl tanımlanmalı? Onları tuval nesnesine nasıl yazılır? – user3624832

@ v-rubinetti tarafından belirtildiği gibi, yöntemleri yanlış şekilde çağırmaya çalışıyorsunuz.

o kodlayarak tuval basit yıldızı çizmek kolay olabilir iken

, gelişmiş şeyler çizmek için karmaşık. Gelişmiş vektör grafikleri çizmek ve bir html5 belgesine kaydetmek için gibi açık kaynaklı bir Vektör grafik yazılımını ink2canvas uzantısıyla birlikte kullanabilirsiniz.

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

kaynak

2014-09-15 00:24:40 kums

SVG dosyanızı neden SVG dosyasından çizim yapabildiğiniz için kodlara dönüştürdünüz? Http://jsfiddle.net/Lq6rksct/1 Kodunuza sabit kodlama verileri kötü bir uygulama olarak kabul edilir. –

Bağlam yöntemleriyle ilgili soruyu başka nasıl yanıtlarım? Tuvalde SVG tartışmasına karşı taraf tutmuyorum. Yaptıklarınız için en iyi olanı seçin (Örneğin, oyunlar için, tuval en iyi şekilde çalışır). – kums

Yorumumu yeniden okumak isteyebilirsiniz. Tuval üzerine SVG kullanımı hakkında bir şey bile söylemedim. –

bir yıldız temelde, bir iç ve bir dış yarıçap üzerinde alternatif noktaları ile normal bir çokgen olup:

Örneğin, burada 25-uçlu yıldız ink2canvas uzantısı kullanılarak Inkscape çizilmiş ve kaydedilir.

Yıldız şekli çizmek için esnek bir işlev örneği.

enter image description here

Örnek kodu ve bir 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>

kaynak

2014-09-15 03:09:01 markE

Teşekkürler, sadece yaklaşık 5 dakika içinde yaklaşık 3 saat çalıştım, teşekkürler :) –

'ctx.strokeSyle' üzerinde bir yazım hatası var, 'ctx.strokeStyle' olmalıdır olmalı –

Çarpıcı derecede güzel bir şey yarattığınız temel kod ve genişletir. Doğrudan ortaya çıkan herhangi bir kârda paylaşmayı düşünüyorsanız, [email protected] adresinden bana ulaşmak isteyebilirsiniz. –

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

kaynak

2017-05-02 14:41:35

fonksiyonu

Bu konum, #spikes ve sivri iç & dış çapındaki ayarlayabilir Koordinat çevirisi ile daha kısa olabilir:

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

kaynak

2017-07-17 09:09:02

Bu yöntemi sev, rotasyon simetrisi ile her şeye uyarlanabilir. –

Tuval HTML5'i kullanarak bir yıldız nasıl çizilir?

cevap

İlgili konular