JavaScript 中的矩形星形图案

在 JavaScript 中，我们可以利用 canvas 元素绘制出各种形状的图案，包括矩形星形图案。以下是一个简单的例子：

// 获取 canvas 元素
const canvas = document.querySelector('canvas');

// 将 canvas 元素的宽度和高度设置为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 获取 canvas 的绘图上下文
const ctx = canvas.getContext('2d');

// 设置绘制的样式
ctx.strokeStyle = 'purple';
ctx.lineWidth = 5;

// 绘制一个矩形星形
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(75, 100);
ctx.lineTo(50, 75);
ctx.closePath();
ctx.stroke();

代码分析

这段代码分为四个部分：

1. 获取 canvas 元素并设置其宽度和高度为窗口大小。

   const canvas = document.querySelector('canvas');
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
   

2. 获取 canvas 的绘图上下文 ctx，并设置绘制的样式。

   const ctx = canvas.getContext('2d');
   ctx.strokeStyle = 'purple';
   ctx.lineWidth = 5;
   

   strokeStyle 属性设置绘制的颜色，它可以是字符串表示的颜色名称、RGB 值或十六进制数值。lineWidth 属性设置线宽。

3. 绘制一个矩形星形。

   ctx.beginPath();
   ctx.moveTo(75, 50);
   ctx.lineTo(100, 75);
   ctx.lineTo(75, 100);
   ctx.lineTo(50, 75);
   ctx.closePath();
   ctx.stroke();
   

   • beginPath() 开始一个新的绘制路径。
   • moveTo(x, y) 将路径起点移动到指定的坐标位置。
   • lineTo(x, y) 添加一个新的点，轮廓从上个点到这个点之间的线段。
   • closePath() 创建从当前点到起点的路径。
   • stroke() 绘制轮廓。

总结

以上是 JavaScript 中绘制矩形星形图案的简单介绍。通过对 canvas 元素的掌握，我们可以绘制出各种形状的图案，实现更加丰富多彩的前端效果。