Sample is best!
Sample is best!
開発環境 メモ帳
実行環境 Internet Explorer 11


svgSineCurve.html 
<!doctype html>
<head>
<title>svgSineCurve</title>
</head>
 
<body>
<svg id="svg" width=800 height=600 overflow="hidden"></svg>
<script>
 
var svg;
 
main();
 
function main()
{
	svg = document.getElementById("svg");
	var width = svg.getAttribute("width");
	var height_2 = Math.floor(svg.getAttribute("height") / 2);
 
	var points = [];
	for (var i = 0; i < width; i++) {
		var t = i / width;
		var h = Math.sin(2 * Math.PI * t);
		points.push(i + "," + Math.round(height_2 - h * height_2));
	}
 
	append("line", {x1:0, y1:height_2, x2:width, y2:height_2, stroke:"#000"});
	append("polyline", {points:points.join(" "), stroke:"#f00", fill:"none"});
}
 
function append(type, attr)
{
	var e = document.createElementNS("http://www.w3.org/2000/svg", type);
	for (var n in attr) {
		e.setAttribute(n, attr[n]);
	}
	svg.appendChild(e);
}
 
</script>
</body>
 
「svgSineCurve」をウィキ内検索
最終更新：2014年11月14日 20:20