80 lines
2.4 KiB
HTML
80 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>sqare round inside corner</title>
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id='fps'></div>
|
|
<svg viewbox="0 0 15 15">
|
|
<rect width="10" height="10" x="0" y="0" stroke="green" stroke-width="0.1" fill="none" />
|
|
<circle cx='0' cy='0', r='1' />
|
|
<line y1="0" x1="5" y2="10" x2="5" stroke="red" stroke-width="0.05" />
|
|
<line y1="0" x1="5" y2="10" x2="10" stroke="red" stroke-width="0.05" />
|
|
<circle cx="10" cy="0" r="0.05" fill="blue" />
|
|
</svg>
|
|
|
|
<script>
|
|
|
|
|
|
var drow = function(){
|
|
a.drow(a)
|
|
}
|
|
|
|
class corner{
|
|
|
|
grow = 0.1;
|
|
fpsSlower = 0;
|
|
radius = 1;
|
|
|
|
constructor(svg){
|
|
this.last = new Date().getTime();
|
|
this.svg = svg;
|
|
this.circle = svg.getElementsByTagName('circle')[0]
|
|
this.dot = svg.getElementsByTagName('circle')[1]
|
|
this.line = svg.getElementsByTagName('line')[0]
|
|
this.line2 = svg.getElementsByTagName('line')[1]
|
|
this.fps = document.getElementById('fps')
|
|
this.drow(this)
|
|
}
|
|
|
|
drow(self){
|
|
if(typeof self != 'object'){
|
|
self = a
|
|
}
|
|
requestAnimationFrame(self.drow)
|
|
//setTimeout(self.drow, 100)
|
|
if(self.fpsSlower == 10){
|
|
var last = new Date().getTime()
|
|
self.fps.innerHTML = Math.round(10*100*1000/(last - self.last))/100 + " fps"
|
|
self.last = last
|
|
self.fpsSlower = 0
|
|
}
|
|
self.fpsSlower += 1;
|
|
self.circle.r.baseVal.value = self.radius;
|
|
self.circle.cx.baseVal.value = self.circle.cy.baseVal.value = 10 - (Math.SQRT2/2 * self.radius);
|
|
self.line.x1.baseVal.value = self.line.y1.baseVal.value = 10 - (Math.SQRT2/2 * self.radius);
|
|
self.line2.x1.baseVal.value = self.line2.y1.baseVal.value = 10 - (Math.SQRT2/2 * self.radius);
|
|
self.line.x2.baseVal.value = 10 - (self.radius * 1.414);
|
|
self.dot.cy.baseVal.value = 10 - (self.radius * 1.414);
|
|
|
|
self.radius += self.grow
|
|
if((self.radius >= 7.07 && self.grow > 0)|| (self.radius <= 0.01 && self.grow < 0))
|
|
self.grow = -self.grow
|
|
}
|
|
}
|
|
|
|
window.onload = function() {
|
|
a = new corner(document.getElementsByTagName('svg')[0])
|
|
var gui = new dat.GUI();
|
|
gui.add(a, 'radius', 0.01, 7.07).step(0.001).listen();
|
|
gui.add(a, 'grow', 0, 4)
|
|
};
|
|
|
|
</script>
|
|
<script type="text/javascript" src="dat.gui.min.js"></script>
|
|
</body>
|
|
</html> |