Dessiner et animer un triangle en SVG et HTML avec l'entrée de l'utilisateur

J'ai un projet de collège que j'ai choisi de présenter en HTML, l'utilisateur entrerait les trois côtés d'un triangle et la forme serait rendue sur l'écran. Je l'ai fait un JavaScript qui obtiennent ces valeurs et créer les coordonnées x et y dessin du triangle dans la balise <canvas>:Dessiner et animer un triangle en SVG et HTML avec l'entrée de l'utilisateur

<script type="application/javascript"> 
function init() { 
var canvas = document.getElementById("canvas"); 
if (canvas.getContext) { 
var ctx = canvas.getContext("2d"); 
var a = *user input*; 
var b = *user input*; 
var c = *user input*; 
var ox = 450-(a/2); // 450px since the canvas size is 900px, 
var oy = 450+(y3/2); // this aligns the figure to the center 
var x3 = ((b*b)+(a*a)-(c*c))/(2*a); 
var y3 = Math.ceil(Math.sqrt((b*b)-(x3*2))); 
var img = new Image(); 
img.src = 'grad.png'; 
ctx.strokeStyle = '#fff'; 
ctx.lineWidth = 3; 
ctx.shadowOffsetX = 0; 
ctx.shadowOffsetY = 0; 
ctx.shadowBlur = 10; 
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; 
var ptrn = ctx.createPattern(img,'repeat'); 
ctx.fillStyle = ptrn; 
ctx.beginPath(); 
ctx.moveTo(ox,oy); 
ctx.lineTo(a+ox,oy); 
ctx.lineTo(ox+x3,oy-y3); 
ctx.lineTo(ox,oy); 
ctx.fill(); 
ctx.stroke(); 
ctx.closePath(); 
} 
} 
</script> 

<body onLoad="init();"> 
<canvas id="canvas" width="900" height="900"></canvas><br> 
</body>

Je suis en train de composer une animation simple à l'échelle une fois que la page est chargée faisant le triangle et d'autres formes pour "grandir" sur l'écran. Si j'utilise CSS, la toile entière sera mise à l'échelle. De plus, je ne sais pas comment rendre cette animation possible puisque les valeurs ne sont pas fixes et en utilisant canvas, je devrais animer cette image-par-image. Maintenant, si j'utilise CSS et SVG, je pourrais utiliser un simple effet d'échelle et de facilité pour chaque élément, le problème est que je devrais générer le triangle dans un SVG en utilisant les valeurs entrées par l'utilisateur. Comment puis-je faire ceci?

Source

2011-10-16 Samuel

Si vous allez toujours avoir un triangle (ou un polygone) sur l'écran, je créerais le cadre de base avec SVG/CSS et définissez l'attribut wuth CSS:

<svg xmlns="http://www.w3.org/2000/svg" width="900" height="900"> 
    <defs> 
     <filter id="dropshadow" height="130%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="10"/> 
      <feMerge> 
       <feMergeNode/> 
       <feMergeNode in="SourceGraphic"/> 
      </feMerge> 
     </filter> 
    </defs> 
    <polygon id="triangle" filter="url(#dropshadow)" /> 
</svg> 
<style> 
    #triangle { 
     fill: url(grad.png); 
     stroke-width: 3px; 
     stroke: white; 
    } 
</style>

Vous pouvez ensuite utiliser une grande partie du même code pour définir les points de polygone:

var points = [ 
    [ox, oy].join(','), 
    [a + ox, oy].join(','), 
    [ox + x3, oy - y3].join(',') 
    ].join(' '); 
document.getElementById('triangle').setAttribute('points', points);

Vous pouvez voir un exemple ici: http://fiddle.jshell.net/fTPdy/

Source

2011-10-16 05:12:11

Merci! Ceci est exactement ce que je cherchais! – Samuel

Un triangle est un polygone à 3 points. Regardez la documentation SVG Polygon. En JavaScript vous pouvez créer un polygone comme ceci:

var svgns = "http://www.w3.org/2000/svg"; 

function makeTriangle() { 
    shape = svgDocument.createElementNS(svgns, "polygon"); 
    shape.setAttributeNS(null, "points", "5,5 45,45 5,45"); 
    shape.setAttributeNS(null, "fill", "none"); 
    shape.setAttributeNS(null, "stroke", "green"); 

    svgDocument.documentElement.appendChild(shape); 
}

Source

2011-10-16 04:40:45

Dessiner et animer un triangle en SVG et HTML avec l'entrée de l'utilisateur

Répondre

Questions connexes