У меня есть проект колледжа, который я решил представить в HTML, пользователь будет вводить три стороны треугольника, и форма будет отображаться на экране. Я создал JavaScript, который получает эти значения и создает координаты x и y, рисуя треугольник внутри тега <canvas>:
<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, весь холст будет масштабироваться. Кроме того, я не знаю, как сделать эту анимацию возможной, поскольку значения не фиксированы, и используя canvas, мне пришлось бы анимировать этот кадр за кадром.
Теперь, если я использую CSS и SVG, я мог бы использовать простой эффект упрощения и масштабирования для каждого элемента, проблема в том, что мне пришлось бы генерировать треугольник в SVG, используя значения, введенные пользователем. Как я могу это сделать?