Javascript 使用用户输入在SVG和HTML中绘制三角形并设置其动画
我有一个大学项目,我选择用HTML呈现,用户输入三角形的三条边,形状就会呈现在屏幕上。我制作了一个JavaScript,它获取这些值并创建x和y坐标,在Javascript 使用用户输入在SVG和HTML中绘制三角形并设置其动画,javascript,html,animation,canvas,svg,Javascript,Html,Animation,Canvas,Svg,我有一个大学项目,我选择用HTML呈现,用户输入三角形的三条边,形状就会呈现在屏幕上。我制作了一个JavaScript,它获取这些值并创建x和y坐标,在标记内绘制三角形: <script type="application/javascript"> function init() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext(
标记内绘制三角形:
<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>
函数init(){
var canvas=document.getElementById(“canvas”);
if(canvas.getContext){
var ctx=canvas.getContext(“2d”);
变量a=*用户输入*;
变量b=*用户输入*;
var c=*用户输入*;
var ox=450-(a/2);//450px因为画布大小是900px,
var oy=450+(y3/2);//这将使图形与中心对齐
变量x3=((b*b)+(a*a)-(c*c))/(2*a);
var y3=Math.ceil(Math.sqrt((b*b)-(x3*2));
var img=新图像();
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(牛,牛);
ctx.lineTo(a+ox,oy);
ctx.lineTo(ox+x3,oy-y3);
ctx.lineTo(牛、牛);
ctx.fill();
ctx.stroke();
ctx.closePath();
}
}
我试图在页面加载后制作一个简单的缩放动画,使三角形和其他形状在屏幕上“增长”。如果我使用CSS,整个画布将缩放。此外,我不知道如何使这个动画成为可能,因为这些值不是固定的,并且使用画布,我必须逐帧为这个帧设置动画。
现在如果我使用CSS和SVG,我可以对每个元素使用简单的易用性和缩放效果,问题是我必须使用用户输入的值在SVG中生成三角形。我该怎么做呢?三角形是一个有3个点的多边形。查看文档。 在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创建基本框架,并设置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>
您可以在这里看到一个示例:谢谢!这正是我要找的!
var points = [
[ox, oy].join(','),
[a + ox, oy].join(','),
[ox + x3, oy - y3].join(',')
].join(' ');
document.getElementById('triangle').setAttribute('points', points);