Canvas绘制正多边形及五角星

最新推荐文章于 2024-04-15 13:20:28 发布

置顶

飞羽轩

最新推荐文章于 2024-04-15 13:20:28 发布

阅读量870

点赞数

CC 4.0 BY-SA版权

文章标签： Canvas HTML5 正多边形正五角星

本文链接：https://blog.youkuaiyun.com/weixin_42679187/article/details/83185795

本文介绍了Canvas的基本绘图路径语法，并详细讲解如何利用Canvas绘制正多边形，包括如何绘制五角星。通过设置描边宽度、颜色等属性，结合moveTo、lineTo等方法，可以灵活地创建不同形状的图形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般常用的绘图技术有三种：Svg,Canvas和WebGL

在正式使用Canvas绘制多边形及五角星之前，请允许我向大家简单的介绍下Canvas绘图之路径的基本语法结构

ctx.beginPath() -------- 开始一条新路径

ctx.closePath() -------- 闭合当前路径

ctx.lineWidth = 1 ------ 描边宽度

ctx.fillStyle = "#000" 填充样式或颜色

ctx.strokeStyle = "red" 描边样式或颜色

ctx.moveTo(x,y) -------- 移动到指定点

ctx.lineTo(x,y) ------- 从当前点到指定点画直线

ctx.stroke() ------- 对当前路径描边

ctx.fill() ------ 对当前路径填充

在了解了上面的一些基本知识之后，现在我们就要开始使用Canvas绘制正多边形了

<!DOCTYPE HTML>
<html lange=en>
<head>
<meta charset="utf-8"/>
<title> canvas </title>
<style>
#canvas{
	border: 1px #333 solid;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
	如果页面中能够看到这些字，那么您的浏览器不支持canvas
</canvas>
<script>
		var canvas = document.getElementById('canvas'); 
		var ctx = canvas.getContext('2d');

		fun