canvas绘制正多边形

最新推荐文章于 2024-08-18 07:46:46 发布

很单纯的娃

最新推荐文章于 2024-08-18 07:46:46 发布

阅读量223

点赞数

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/qq_37826599/article/details/120651600

版权

<!DOCTYPE html>
	<html>
		<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			function $$(id) {return document.getElementById(id);
			window.onload = function () {
				var cnv = $$("canvas");
				var cxt = cnv.getContext("2d");
				//调用自定义的方法createPolygon()
				createPolygon(cxt, 3, 100, 75,50);
				cxt.fillStyle = "HotPink";
				cxt.fill();
			}
			/** n：表示n边形* dx、dy：表示n边形中心坐标* size：表示n边形的大小*/
			function createPolygon(cxt, n, dx, dy, size) {
				cxt.beginPath();
				var degree = (2 * Math.PI )/ n;
				for (var i = 0; i < n; i++) {
					var x = Math.cos(i * degree);
					var y = Math.sin(i * degree);
					cxt.lineTo(x * size + dx, y * size + dy);
					cxt.closePath();
		</script>
		</head>
		<body>
		<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
		</body>
</html>