HTML5 Canvas笔记——HTML5 Canvas绘五角星
2020-04-17 本文已影响0人
没昔
HTML5 Canvas绘五角星
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五角星</title>
<style type="text/css">
#canvas {
border: thin solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var context = canvas.getContext("2d");
context.beginPath();
//设置是个顶点的坐标，根据顶点制定路径
for (var i = 0; i < 5; i++) {
context.lineTo(Math.cos((18+i*72)/180*Math.PI)*50+200,
-Math.sin((18+i*72)/180*Math.PI)*50+200);
context.lineTo(Math.cos((54+i*72)/180*Math.PI)*20+200,
-Math.sin((54+i*72)/180*Math.PI)*20+200);
}
context.closePath();
//设置边框样式以及填充颜色
context.lineWidth="10";
context.fillStyle = "red";
context.strokeStyle = "wheat";
context.fill();
context.stroke();
</script>
</html>
QQ图片20200417122029.png
