使用canvas绘制一个五角星

Z时代
2024-01-10
分类：技术分享

一、了解canvas

canvas 是HTML5新增的元素，用于在网页上绘制图形。但 canvas 只是图形的容器，必须要通过脚本(通常是JavaScript)来绘制图形。

可以通过多种方法使用canvas标签来绘制路径、盒、圆、字符及添加图像等。

<canvas> 与 </canvas>标签间插入的内容是供不支持 canvas 元素的浏览器显示的，可以用来做兼容，例如：

<canvasid="myCanvas"width="400"height="400">
您的浏览器暂时不支持canvas，请升级或更换您的浏览器！
</canvas>

使用 canvas 来绘制图形：

<script>
// 使用id来寻找canvas元素
var myCanvas = document.getElementById('myCanvas');
if (myCanvas.getContext) {
// 创建context对象
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
var ctx = myCanvas.getContext("2d");
// 写一个Hello World先
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
}
</script>

二、使用canvas绘制一个五角星

<script>
// 使用id来寻找canvas元素
var myCanvas = document.getElementById('myCanvas');
if (myCanvas.getContext) {
// 创建context对象
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
var ctx = myCanvas.getContext("2d");
// beginPath：开始绘制一段新的路径
ctx.beginPath();
var horn = 5; // 画5个角
var angle = 360/horn; // 五个角的度数
// 两个圆的半径
var R = 200;
var r = 80;
// 坐标
var x = 200;
var y = 200;
for (var i = 0; i < horn; i++) {
// 角度转弧度：角度/180*Math.PI
// 外圆顶点坐标
ctx.lineTo(Math.cos((18 + i * angle) / 180 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180 * Math.PI) * R + y);
// 內圆顶点坐标
ctx.lineTo(Math.cos((54 + i * angle) / 180 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180 * Math.PI) * r + y);
}
// closePath：关闭路径，将路径的终点与起点相连
ctx.closePath();
ctx.lineWidth = "3";
ctx.fillStyle = '#E4EF00';
ctx.strokeStyle = "red";
ctx.fill();
ctx.stroke();
}
</script>