사용자 입력을 사용하여 SVG 및 HTML 삼각형 그리기 및 애니메이션

대학 프로젝트를 HTML로 표시하도록 선택 했으므로 사용자는 삼각형의 세면을 입력하고 모양이 화면에 렌더링됩니다. 페이지가 삼각형을 만드는로드되면사용자 입력을 사용하여 SVG 및 HTML 삼각형 그리기 및 애니메이션

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

나는 단순한 규모의 애니메이션을 구성하기 위해 노력하고있어 : 나는이 값을 얻을 x와 <canvas> 태그 안에있는 삼각형을 그리기 y 좌표를 만들 자바 스크립트를했습니다 및 기타 모양을 화면에서 "성장"합니다. CSS를 사용하면 전체 캔버스가 확장됩니다. 또한 값이 고정되어 있지 않고 캔버스를 사용하기 때문에이 애니메이션을 만드는 방법을 알지 못합니다. 프레임별로 애니메이션을 적용해야합니다. 이제 CSS와 SVG를 사용하면 각 요소에 간편한 스케일 효과를 사용할 수 있습니다. 문제는 사용자가 입력 한 값을 사용하여 SVG에서 삼각형을 생성해야한다는 것입니다. 어떻게해야합니까?

출처

2011-10-16 Samuel

과 속성을 설정합니다 자바 스크립트에서 당신과 같이 다각형을 만들 수 있습니다 wuth CSS : 당신은 여기에 예를 볼 수 있습니다

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

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

당신은 다음 다각형 점을 설정하는 동일한 코드의 많은 부분을 사용할 수 http://fiddle.jshell.net/fTPdy/

출처

2011-10-16 05:12:11

고마워요! 이것은 내가 찾고 있었던 바로 그 것이다! – Samuel

삼각형은 3 포인트가있는 다각형입니다. SVG Polygon 설명서를 참조하십시오. 당신이 항상 화면에 삼각형 (또는 다각형)가 거라면 내가 SVG/CSS와 기본 프레임 워크를 만들 것,

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

출처

2011-10-16 04:40:45

사용자 입력을 사용하여 SVG 및 HTML 삼각형 그리기 및 애니메이션

답변

관련 문제