使用用户输入在 SVG 和 HTML 中绘制三角形并为其设置动画

发布于 2024-12-09 19:36:46 字数 1339 浏览 0 评论 0原文

我有一个大学项目,我选择以 HTML 形式呈现,用户将输入三角形的三个边,形状将呈现在屏幕上。我编写了一个 JavaScript 来获取这些值并创建 x 和 y 坐标,在 标记内绘制三角形:

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

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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

未央 2024-12-16 19:36:47

如果屏幕上总是有一个三角形(或多边形),我将使用 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/

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>

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

You can see an example here: http://fiddle.jshell.net/fTPdy/

骷髅 2024-12-16 19:36:46

三角形是具有 3 个点的多边形。请参阅 SVG 多边形 文档。
在 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);
}

A triangle is a polygon with 3 points. Look at SVG Polygon documentation.
In JavaScript you can create a polygon like so:

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);
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文