Canvas绘制正多边形及五角星

一般常用的绘图技术有三种：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 canva

Canvas绘制正多边形及五角星

悦读