绘图和动画在SVG三角形和HTML用户输入 [英] Drawing and animating a triangle in SVG and HTML with user input
问题描述
我有我的HTML选择了present一个大学项目，用户会输入一个三角形形状的三个边会在屏幕上呈现。我做了一个JavaScript代码获取这些值并创建x和y坐标绘制内的三角形＆LT;＆帆布GT; 标签：
I have a college project that I've chose to present in HTML, the user would input the three sides of a triangle and the shape would be rendered on the screen. I've made a JavaScript that get these values and create the x and y coordinates drawing the triangle inside the <canvas> tag:
<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>
我想一旦页面加载使得三角形等形状的屏幕上生长组成一个简单的规模的动画。如果我使用CSS，整个画布将规模。另外，我不知道如何使这个动画可能的，因为值是不固定的，用的画布，我将不得不动画此帧一帧。
现在，如果我使用CSS和SVG，我可以用一个简单的易用性，并在规模效应的每个元素，问题是，我不得不产生使用由用户输入的值的SVG的三角形。我怎样才能做到这一点？
I'm trying to compose a simple scale animation once the page is loaded making the triangle and other shapes to "grow" on the screen. If I use CSS, the entire canvas will scale. Also, I don't know how to make this animation possible since the values are not fixed and using canvas, I would have to animate this frame-by-frame. Now if I use CSS and SVG, I could use a simple ease-in and scale effect for each element, the problem is that I would have to generate the triangle in a SVG using the values inputted by user. How can I do this?
推荐答案
如果你总是会在屏幕上的三角形（或多边形），我会创建一个SVG / CSS的基本框架和设置属性wuth CSS：
If you're always going to have a triangle (or polygon) on the screen, I would create the basic framework with SVG/CSS and set the attribute 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>
您可以再使用大致相同的code的设置多边形点：
You could then use much of the same code to set the polygon points:
var points = [
[ox, oy].join(','),
[a + ox, oy].join(','),
[ox + x3, oy - y3].join(',')
].join(' ');
document.getElementById('triangle').setAttribute('points', points);
您可以在这里看到一个例子： http://fiddle.jshell.net/fTPdy/
You can see an example here: http://fiddle.jshell.net/fTPdy/
这篇关于绘图和动画在SVG三角形和HTML用户输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
