在SVG和HTML中使用用户输入绘制和动画三角形

Drawing and animating a triangle in SVG and HTML with user input

本文关键字：输入 绘制 动画 用户 三角形 SVG HTML      更新时间：2023-09-26

我有一个大学项目，我选择在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，整个画布都会缩放。此外，我不知道如何使这个动画成为可能，因为值不是固定的，使用画布，我必须逐帧动画。现在，如果我使用CSS和SVG，我可以对每个元素使用简单的导入和缩放效果，问题是我必须使用用户输入的值在SVG中生成三角形。我该怎么做呢?

三角形是有3个点的多边形。查看SVG Polygon文档。在JavaScript中，你可以像这样创建一个多边形:

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

如果你总是要在屏幕上有一个三角形(或多边形)，我会用SVG/CSS创建基本框架，并设置属性为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>

你可以使用大部分相同的代码来设置多边形点:

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/

相关文章：